@bobbykim/mcl-forms 0.5.0 → 0.7.0

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 (41) hide show
  1. package/dist/index.d.ts +610 -0
  2. package/dist/mcl-forms.js +589 -0
  3. package/dist/mcl-forms.umd.cjs +2 -0
  4. package/package.json +29 -6
  5. package/CHANGELOG.md +0 -58
  6. package/index.d.ts +0 -10
  7. package/index.js +0 -10
  8. package/index.ts +0 -19
  9. package/lib/assets/CaretDown.vue +0 -14
  10. package/lib/assets/CaretDown.vue.d.ts +0 -2
  11. package/lib/common/InputHighlight.vue +0 -46
  12. package/lib/common/InputHighlight.vue.d.ts +0 -41
  13. package/lib/common/index.types.d.ts +0 -4
  14. package/lib/common/index.types.js +0 -1
  15. package/lib/common/index.types.ts +0 -5
  16. package/lib/mcl-form-group/MclFormGroup.vue +0 -48
  17. package/lib/mcl-form-group/MclFormGroup.vue.d.ts +0 -52
  18. package/lib/mcl-input-file/MclInputFile.vue +0 -151
  19. package/lib/mcl-input-file/MclInputFile.vue.d.ts +0 -93
  20. package/lib/mcl-input-radio/MclInputRadio.vue +0 -91
  21. package/lib/mcl-input-radio/MclInputRadio.vue.d.ts +0 -62
  22. package/lib/mcl-input-radio/index.types.d.ts +0 -1
  23. package/lib/mcl-input-radio/index.types.js +0 -1
  24. package/lib/mcl-input-radio/index.types.ts +0 -1
  25. package/lib/mcl-input-switch/MclInputSwitch.vue +0 -147
  26. package/lib/mcl-input-switch/MclInputSwitch.vue.d.ts +0 -59
  27. package/lib/mcl-input-switch/index.types.d.ts +0 -1
  28. package/lib/mcl-input-switch/index.types.js +0 -1
  29. package/lib/mcl-input-switch/index.types.ts +0 -1
  30. package/lib/mcl-input-text/MclInputText.vue +0 -113
  31. package/lib/mcl-input-text/MclInputText.vue.d.ts +0 -103
  32. package/lib/mcl-select/MclSelect.vue +0 -287
  33. package/lib/mcl-select/MclSelect.vue.d.ts +0 -108
  34. package/lib/mcl-select/index.types.d.ts +0 -5
  35. package/lib/mcl-select/index.types.js +0 -1
  36. package/lib/mcl-select/index.types.ts +0 -6
  37. package/lib/mcl-text-area/MclTextArea.vue +0 -100
  38. package/lib/mcl-text-area/MclTextArea.vue.d.ts +0 -88
  39. package/tsconfig.json +0 -5
  40. package/tsconfig.ts.json +0 -9
  41. package/tsconfig.vue.json +0 -9
package/package.json CHANGED
@@ -1,11 +1,23 @@
1
1
  {
2
2
  "name": "@bobbykim/mcl-forms",
3
- "version": "0.5.0",
4
- "description": "",
3
+ "version": "0.7.0",
4
+ "description": "form group components based on manguito-theme",
5
5
  "type": "module",
6
- "main": "index.ts",
6
+ "files": [
7
+ "dist"
8
+ ],
9
+ "main": "./dist/mcl-forms.umd.cjs",
10
+ "module": "./dist/mcl-forms.js",
11
+ "types": "./dist/index.d.ts",
12
+ "exports": {
13
+ ".": {
14
+ "import": "./dist/mcl-forms.js",
15
+ "require": "./dist/mcl-forms.umd.cjs",
16
+ "types": "./dist/index.d.ts"
17
+ }
18
+ },
7
19
  "scripts": {
8
- "build": "vue-tsc --project tsconfig.vue.json && tsc --project tsconfig.ts.json"
20
+ "build": "vite build"
9
21
  },
10
22
  "author": {
11
23
  "name": "Bobby Kim",
@@ -21,7 +33,18 @@
21
33
  },
22
34
  "license": "MIT",
23
35
  "dependencies": {
24
- "@bobbykim/manguito-theme": "^0.17.0"
36
+ "@bobbykim/manguito-theme": "0.19.0",
37
+ "@vueuse/core": "^10.8.0",
38
+ "vue": "^3.3.10"
39
+ },
40
+ "devDependencies": {
41
+ "@vitejs/plugin-vue": "^4.5.2",
42
+ "sass": "^1.69.5",
43
+ "typescript": "^5.3.3",
44
+ "vite": "^4.5.1",
45
+ "vite-plugin-css-injected-by-js": "^3.5.0",
46
+ "vite-plugin-dts": "^3.8.3",
47
+ "vue-tsc": "^1.8.25"
25
48
  },
26
- "gitHead": "f4be01699f747aba1f831a1f796f8e41e6fcd676"
49
+ "gitHead": "b66ad8b5fabf32c0814726f0847ce86399b4115b"
27
50
  }
package/CHANGELOG.md DELETED
@@ -1,58 +0,0 @@
1
- # Change Log
2
-
3
- All notable changes to this project will be documented in this file.
4
- See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
-
6
- # [0.5.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/mcl-forms@0.3.0...@bobbykim/mcl-forms@0.5.0) (2024-03-24)
7
-
8
-
9
- ### Features
10
-
11
- * build and release ([a372086](https://github.com/bobbykim89/manguito-component-library/commit/a3720861fb40dd6ec1d0e3dda1f06e2479967432))
12
- * **components/*:** prepublish build ([c8eb95a](https://github.com/bobbykim89/manguito-component-library/commit/c8eb95a0ede6727bf183d2e9ad634ae64af1411d))
13
- * **mcl-header:** move deprecated items to deprecated folder in root dir, update configs, init mcl-header-b component ([19aa842](https://github.com/bobbykim89/manguito-component-library/commit/19aa842faa7f1594f7be030b97d5093014efe7cb))
14
- * tsconfig update, slots and emits update ([c30ff80](https://github.com/bobbykim89/manguito-component-library/commit/c30ff804c961d205ac097e20cd51285a15ca8966))
15
-
16
-
17
-
18
-
19
-
20
- # [0.4.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/mcl-forms@0.3.0...@bobbykim/mcl-forms@0.4.0) (2024-03-21)
21
-
22
-
23
- ### Features
24
-
25
- * **mcl-header:** move deprecated items to deprecated folder in root dir, update configs, init mcl-header-b component ([19aa842](https://github.com/bobbykim89/manguito-component-library/commit/19aa842faa7f1594f7be030b97d5093014efe7cb))
26
- * tsconfig update, slots and emits update ([c30ff80](https://github.com/bobbykim89/manguito-component-library/commit/c30ff804c961d205ac097e20cd51285a15ca8966))
27
-
28
-
29
-
30
-
31
-
32
- # [0.3.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/mcl-forms@0.2.0...@bobbykim/mcl-forms@0.3.0) (2024-02-27)
33
-
34
-
35
- ### Features
36
-
37
- * **/components/**/README.md,/deprecated:** update readme files, move deprecated packages to deprecated folder ([c0f8f7d](https://github.com/bobbykim89/manguito-component-library/commit/c0f8f7df158b8fcd99b4e3d191e02e3c8a9c144d))
38
-
39
-
40
-
41
-
42
-
43
- # 0.2.0 (2024-02-27)
44
-
45
-
46
- ### Features
47
-
48
- * **components/*:** run package:build ([fcc2d09](https://github.com/bobbykim89/manguito-component-library/commit/fcc2d0953d77ecaa317be27eb212c927dec33b17))
49
- * **manguito-theme,mcl-cards,mcl-header,mcl-footer,mcl-carousel:** add vueuse as one of dependencies, update code to make them ssr friendly ([119a327](https://github.com/bobbykim89/manguito-component-library/commit/119a327adf1ca9866e6ac063bce5acd4790db612))
50
- * **mcl-forms:** add mcl-form-group and mcl-text-area ([aa3f412](https://github.com/bobbykim89/manguito-component-library/commit/aa3f412334acc3793ad12303cad955b15ca79831))
51
- * **mcl-forms:** add mcl-input-file component inside mcl-forms package ([98e1464](https://github.com/bobbykim89/manguito-component-library/commit/98e14641061bd54c43d1d62dc5d80d66c02c5f90))
52
- * **mcl-forms:** add mcl-input-radio ([de8d9a7](https://github.com/bobbykim89/manguito-component-library/commit/de8d9a7a2e66a7c8abe7702adfad21f68d0767f6))
53
- * **mcl-forms:** add text-color props for mcl-input-text and mcl-text-area, fix glitch on mcl-select ([3381b10](https://github.com/bobbykim89/manguito-component-library/commit/3381b10babeed892717b4e4b21c218c7027d9a1a))
54
- * **mcl-forms:** init mcl-forms package ([c2512ac](https://github.com/bobbykim89/manguito-component-library/commit/c2512ac7c89c71f287fcd4cd12f8dc84150a5239))
55
- * **mcl-input-switch:** add mcl-input-switch component in mcl-forms library ([b3a9edf](https://github.com/bobbykim89/manguito-component-library/commit/b3a9edf8fcfecb0ab9f2f82aa79618133f6dd4fc))
56
- * **mcl-select:** finalize mcl-select component ([3521482](https://github.com/bobbykim89/manguito-component-library/commit/3521482a782313e0f3d8b83de10839097757e7eb))
57
- * **mcl-select:** wip) update mcl-select component to have combobox format ([cdce2ef](https://github.com/bobbykim89/manguito-component-library/commit/cdce2ef401d22c4f822633e996c3bcd4e06c3636))
58
- * **stories/*:** ran package:build to build type declaration, move deprecated story files into deprecated folder ([ffc487d](https://github.com/bobbykim89/manguito-component-library/commit/ffc487dbcc093be7a3ccfeae98c5e10e8372a0e3))
package/index.d.ts DELETED
@@ -1,10 +0,0 @@
1
- import MclFormGroup from './lib/mcl-form-group/MclFormGroup.vue';
2
- import MclInputFile from './lib/mcl-input-file/MclInputFile.vue';
3
- import MclInputRadio from './lib/mcl-input-radio/MclInputRadio.vue';
4
- import MclInputSwitch from './lib/mcl-input-switch/MclInputSwitch.vue';
5
- import MclInputText from './lib/mcl-input-text/MclInputText.vue';
6
- import MclSelect from './lib/mcl-select/MclSelect.vue';
7
- import MclTextArea from './lib/mcl-text-area/MclTextArea.vue';
8
- export * from './lib/mcl-input-radio/index.types';
9
- export * from './lib/mcl-select/index.types';
10
- export { MclFormGroup, MclInputFile, MclInputRadio, MclInputSwitch, MclInputText, MclSelect, MclTextArea, };
package/index.js DELETED
@@ -1,10 +0,0 @@
1
- import MclFormGroup from './lib/mcl-form-group/MclFormGroup.vue';
2
- import MclInputFile from './lib/mcl-input-file/MclInputFile.vue';
3
- import MclInputRadio from './lib/mcl-input-radio/MclInputRadio.vue';
4
- import MclInputSwitch from './lib/mcl-input-switch/MclInputSwitch.vue';
5
- import MclInputText from './lib/mcl-input-text/MclInputText.vue';
6
- import MclSelect from './lib/mcl-select/MclSelect.vue';
7
- import MclTextArea from './lib/mcl-text-area/MclTextArea.vue';
8
- export * from './lib/mcl-input-radio/index.types';
9
- export * from './lib/mcl-select/index.types';
10
- export { MclFormGroup, MclInputFile, MclInputRadio, MclInputSwitch, MclInputText, MclSelect, MclTextArea, };
package/index.ts DELETED
@@ -1,19 +0,0 @@
1
- import MclFormGroup from './lib/mcl-form-group/MclFormGroup.vue'
2
- import MclInputFile from './lib/mcl-input-file/MclInputFile.vue'
3
- import MclInputRadio from './lib/mcl-input-radio/MclInputRadio.vue'
4
- import MclInputSwitch from './lib/mcl-input-switch/MclInputSwitch.vue'
5
- import MclInputText from './lib/mcl-input-text/MclInputText.vue'
6
- import MclSelect from './lib/mcl-select/MclSelect.vue'
7
- import MclTextArea from './lib/mcl-text-area/MclTextArea.vue'
8
-
9
- export * from './lib/mcl-input-radio/index.types'
10
- export * from './lib/mcl-select/index.types'
11
- export {
12
- MclFormGroup,
13
- MclInputFile,
14
- MclInputRadio,
15
- MclInputSwitch,
16
- MclInputText,
17
- MclSelect,
18
- MclTextArea,
19
- }
@@ -1,14 +0,0 @@
1
- <template>
2
- <svg
3
- xmlns="http://www.w3.org/2000/svg"
4
- viewBox="0 0 320 512"
5
- fill="currentColor"
6
- class="h-md w-md"
7
- role="img"
8
- >
9
- <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
10
- <path
11
- d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"
12
- />
13
- </svg>
14
- </template>
@@ -1,2 +0,0 @@
1
- declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
2
- export default _default;
@@ -1,46 +0,0 @@
1
- <script setup lang="ts">
2
- import { computed } from 'vue'
3
- import generateClass from '@bobbykim/manguito-theme'
4
- import type { ColorPalette } from '@bobbykim/manguito-theme'
5
-
6
- type OffsetType = 1 | 2.5
7
-
8
- const props = withDefaults(
9
- defineProps<{
10
- color?: ColorPalette
11
- rounded?: boolean
12
- offset?: OffsetType
13
- }>(),
14
- {
15
- color: 'primary',
16
- rounded: false,
17
- offset: 1,
18
- }
19
- )
20
-
21
- const offsetOptions = {
22
- 1: '-top-1',
23
- 2.5: '-top-2.5',
24
- }
25
-
26
- const getHighlightClass = computed((): string => {
27
- /**
28
- * @param {ColorPalette} color - highlightColor
29
- * @param {boolean} rounded - rounded
30
- * @param {OffsetType} offset
31
- */
32
- const classArray: string[] = [generateClass('BEFOREBG', props.color)]
33
- if (props.rounded) {
34
- classArray.push('rounded-b-md')
35
- }
36
- classArray.push(offsetOptions[props.offset])
37
- return classArray.join(' ')
38
- })
39
- </script>
40
-
41
- <template>
42
- <div
43
- class="relative h-3xs overflow-hidden before:absolute before:bottom-0 before:left-0 before:h-full before:w-0 peer-focus:before:w-full before:transition-[width] before:duration-300 before:ease-linear"
44
- :class="getHighlightClass"
45
- ></div>
46
- </template>
@@ -1,41 +0,0 @@
1
- import type { ColorPalette } from '@bobbykim/manguito-theme';
2
- type OffsetType = 1 | 2.5;
3
- declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
4
- color?: ColorPalette | undefined;
5
- rounded?: boolean | undefined;
6
- offset?: OffsetType | undefined;
7
- }>, {
8
- color: string;
9
- rounded: boolean;
10
- offset: number;
11
- }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
12
- color?: ColorPalette | undefined;
13
- rounded?: boolean | undefined;
14
- offset?: OffsetType | undefined;
15
- }>, {
16
- color: string;
17
- rounded: boolean;
18
- offset: number;
19
- }>>>, {
20
- color: ColorPalette;
21
- rounded: boolean;
22
- offset: OffsetType;
23
- }, {}>;
24
- export default _default;
25
- type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
26
- type __VLS_TypePropsToRuntimeProps<T> = {
27
- [K in keyof T]-?: {} extends Pick<T, K> ? {
28
- type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
29
- } : {
30
- type: import('vue').PropType<T[K]>;
31
- required: true;
32
- };
33
- };
34
- type __VLS_WithDefaults<P, D> = {
35
- [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
36
- default: D[K];
37
- }> : P[K];
38
- };
39
- type __VLS_Prettify<T> = {
40
- [K in keyof T]: T[K];
41
- } & {};
@@ -1,4 +0,0 @@
1
- import type { ColorPalette } from '@bobbykim/manguito-theme';
2
- export type ColorMap = {
3
- [key in ColorPalette]: string;
4
- };
@@ -1 +0,0 @@
1
- export {};
@@ -1,5 +0,0 @@
1
- import type { ColorPalette } from '@bobbykim/manguito-theme'
2
-
3
- export type ColorMap = {
4
- [key in ColorPalette]: string
5
- }
@@ -1,48 +0,0 @@
1
- <script setup lang="ts">
2
- import generateClass from '@bobbykim/manguito-theme'
3
- import type { BodyText, ColorPalette } from '@bobbykim/manguito-theme'
4
- import { computed } from 'vue'
5
- const props = withDefaults(
6
- defineProps<{
7
- labelFor: string
8
- textColor?: ColorPalette
9
- textSize?: BodyText
10
- textBold?: boolean
11
- label?: string
12
- }>(),
13
- {
14
- textColor: 'dark-3',
15
- textSize: 'md',
16
- textBold: false,
17
- }
18
- )
19
- const handleLabelText = computed((): string => {
20
- /**
21
- * @param {ColorPalette} textColor - handles text color of label text
22
- * @param {BodyText} textSize - handles text size of label text
23
- * @param {boolean} textBold - controls whether or not to make label text bold
24
- */
25
- const { textColor, textSize, textBold } = props
26
- const classArray = [
27
- generateClass('TEXTCOLOR', textColor),
28
- generateClass('BODYTEXT', textSize),
29
- ]
30
- if (textBold) {
31
- classArray.push('font-bold')
32
- }
33
- return classArray.join(' ')
34
- })
35
- </script>
36
-
37
- <template>
38
- <div>
39
- <label :for="labelFor" class="inline-block">
40
- <slot name="label">
41
- <p class="mb-2xs" :class="handleLabelText">{{ label }}</p>
42
- </slot>
43
- </label>
44
- <slot />
45
- </div>
46
- </template>
47
-
48
- <style scoped></style>
@@ -1,52 +0,0 @@
1
- import type { BodyText, ColorPalette } from '@bobbykim/manguito-theme';
2
- declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
3
- labelFor: string;
4
- textColor?: ColorPalette | undefined;
5
- textSize?: BodyText | undefined;
6
- textBold?: boolean | undefined;
7
- label?: string | undefined;
8
- }>, {
9
- textColor: string;
10
- textSize: string;
11
- textBold: boolean;
12
- }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
13
- labelFor: string;
14
- textColor?: ColorPalette | undefined;
15
- textSize?: BodyText | undefined;
16
- textBold?: boolean | undefined;
17
- label?: string | undefined;
18
- }>, {
19
- textColor: string;
20
- textSize: string;
21
- textBold: boolean;
22
- }>>>, {
23
- textColor: ColorPalette;
24
- textSize: BodyText;
25
- textBold: boolean;
26
- }, {}>, {
27
- label?(_: {}): any;
28
- default?(_: {}): any;
29
- }>;
30
- export default _default;
31
- type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
32
- type __VLS_TypePropsToRuntimeProps<T> = {
33
- [K in keyof T]-?: {} extends Pick<T, K> ? {
34
- type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
35
- } : {
36
- type: import('vue').PropType<T[K]>;
37
- required: true;
38
- };
39
- };
40
- type __VLS_WithDefaults<P, D> = {
41
- [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
42
- default: D[K];
43
- }> : P[K];
44
- };
45
- type __VLS_Prettify<T> = {
46
- [K in keyof T]: T[K];
47
- } & {};
48
- type __VLS_WithTemplateSlots<T, S> = T & {
49
- new (): {
50
- $slots: S;
51
- };
52
- };
@@ -1,151 +0,0 @@
1
- <script setup lang="ts">
2
- import type { ColorPalette } from '@bobbykim/manguito-theme'
3
- import generateClass from '@bobbykim/manguito-theme'
4
- import { computed, ref } from 'vue'
5
-
6
- const props = withDefaults(
7
- defineProps<{
8
- id: string
9
- displayBorder?: boolean
10
- borderColor?: ColorPalette
11
- rounded?: boolean
12
- bgColor?: ColorPalette
13
- buttonText?: string
14
- buttonTextColor?: ColorPalette
15
- buttonColor?: ColorPalette
16
- displayShadow?: boolean
17
- textColor?: ColorPalette
18
- displayClear?: boolean
19
- isRequired?: boolean
20
- accept?: string
21
- modelValue?: File
22
- }>(),
23
- {
24
- displayBorder: false,
25
- borderColor: 'light-4',
26
- rounded: false,
27
- bgColor: 'light-1',
28
- buttonText: 'Browse File',
29
- buttonTextColor: 'dark-3',
30
- buttonColor: 'light-4',
31
- displayShadow: true,
32
- textColor: 'black',
33
- displayClear: false,
34
- isRequired: false,
35
- accept: 'image/jpg,image/jpeg,image/png',
36
- }
37
- )
38
-
39
- const emit = defineEmits(['update:modelValue'])
40
-
41
- const inputRef = ref()
42
- const fileInputKey = ref<number>(0)
43
- const onButtonClick = () => {
44
- inputRef.value.click()
45
- }
46
- const onChangeFile = (e: Event) => {
47
- const file = (e.target as HTMLInputElement).files![0]
48
- emit('update:modelValue', file)
49
- }
50
-
51
- const onClearFile = () => {
52
- emit('update:modelValue', null)
53
- fileInputKey.value++
54
- }
55
-
56
- const borderClass = computed<string>(() => {
57
- const { rounded, displayBorder, borderColor, displayShadow, bgColor } = props
58
- const classArray: string[] = [generateClass('BGCOLOR', bgColor)]
59
- if (rounded) {
60
- classArray.push('rounded-md')
61
- }
62
- if (displayBorder) {
63
- classArray.push('border-2')
64
- classArray.push(generateClass('BORDER', borderColor))
65
- }
66
- if (displayShadow) {
67
- classArray.push('shadow-md')
68
- }
69
- return classArray.join(' ')
70
- })
71
-
72
- const inputClass = computed<string>(() => {
73
- const { bgColor, textColor } = props
74
- const classArray: string[] = [
75
- // generateClass('BGCOLOR', bgColor),
76
- generateClass('TEXTCOLOR', textColor),
77
- ]
78
- return classArray.join(' ')
79
- })
80
-
81
- const getButtonClass = computed(() => {
82
- const { buttonColor, buttonTextColor, rounded } = props
83
- const classArray: string[] = [
84
- generateClass('BGCOLOR', buttonColor),
85
- generateClass('TEXTCOLOR', buttonTextColor),
86
- ]
87
- if (rounded) {
88
- classArray.push('rounded-l-md')
89
- }
90
- return classArray.join(' ')
91
- })
92
-
93
- const getClearButtonClass = computed<string>(() => {
94
- const { buttonColor, rounded } = props
95
- const classArray: string[] = [generateClass('BGCOLOR', buttonColor)]
96
- if (rounded) {
97
- classArray.push('rounded-r-md')
98
- }
99
- return classArray.join(' ')
100
- })
101
- </script>
102
-
103
- <template>
104
- <div class="flex items-center overflow-hidden" :class="borderClass">
105
- <!-- browse button -->
106
- <div class="shrink-0 my-3xs ml-3xs mr-xs">
107
- <button
108
- class="px-xs py-2xs hover:bg-opacity-70 transition-all duration-200 ease-linear max-w-full"
109
- :class="getButtonClass"
110
- @click="onButtonClick"
111
- >
112
- {{ buttonText }}
113
- </button>
114
- </div>
115
- <input
116
- type="file"
117
- :id="id"
118
- ref="inputRef"
119
- class="file:hidden w-full bg-transparent"
120
- :class="[inputClass]"
121
- :required="isRequired"
122
- :accept="accept"
123
- :key="fileInputKey"
124
- @change="onChangeFile"
125
- />
126
- <!-- clear button -->
127
- <div
128
- v-if="displayClear"
129
- class="self-stretch my-3xs mr-3xs"
130
- @click="onClearFile"
131
- >
132
- <button
133
- class="px-xs py-2xs h-full flex items-center hover:bg-opacity-70 transition-all duration-200 ease-linear"
134
- aria-label="clear"
135
- :class="[getClearButtonClass]"
136
- >
137
- <svg
138
- xmlns="http://www.w3.org/2000/svg"
139
- viewBox="0 0 384 512"
140
- class="h-xs"
141
- :class="generateClass('SVGFILL', buttonTextColor)"
142
- >
143
- <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
144
- <path
145
- d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
146
- />
147
- </svg>
148
- </button>
149
- </div>
150
- </div>
151
- </template>
@@ -1,93 +0,0 @@
1
- import type { ColorPalette } from '@bobbykim/manguito-theme';
2
- declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
3
- id: string;
4
- displayBorder?: boolean | undefined;
5
- borderColor?: ColorPalette | undefined;
6
- rounded?: boolean | undefined;
7
- bgColor?: ColorPalette | undefined;
8
- buttonText?: string | undefined;
9
- buttonTextColor?: ColorPalette | undefined;
10
- buttonColor?: ColorPalette | undefined;
11
- displayShadow?: boolean | undefined;
12
- textColor?: ColorPalette | undefined;
13
- displayClear?: boolean | undefined;
14
- isRequired?: boolean | undefined;
15
- accept?: string | undefined;
16
- modelValue?: File | undefined;
17
- }>, {
18
- displayBorder: boolean;
19
- borderColor: string;
20
- rounded: boolean;
21
- bgColor: string;
22
- buttonText: string;
23
- buttonTextColor: string;
24
- buttonColor: string;
25
- displayShadow: boolean;
26
- textColor: string;
27
- displayClear: boolean;
28
- isRequired: boolean;
29
- accept: string;
30
- }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
31
- "update:modelValue": (...args: any[]) => void;
32
- }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
33
- id: string;
34
- displayBorder?: boolean | undefined;
35
- borderColor?: ColorPalette | undefined;
36
- rounded?: boolean | undefined;
37
- bgColor?: ColorPalette | undefined;
38
- buttonText?: string | undefined;
39
- buttonTextColor?: ColorPalette | undefined;
40
- buttonColor?: ColorPalette | undefined;
41
- displayShadow?: boolean | undefined;
42
- textColor?: ColorPalette | undefined;
43
- displayClear?: boolean | undefined;
44
- isRequired?: boolean | undefined;
45
- accept?: string | undefined;
46
- modelValue?: File | undefined;
47
- }>, {
48
- displayBorder: boolean;
49
- borderColor: string;
50
- rounded: boolean;
51
- bgColor: string;
52
- buttonText: string;
53
- buttonTextColor: string;
54
- buttonColor: string;
55
- displayShadow: boolean;
56
- textColor: string;
57
- displayClear: boolean;
58
- isRequired: boolean;
59
- accept: string;
60
- }>>> & {
61
- "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
62
- }, {
63
- textColor: ColorPalette;
64
- accept: string;
65
- displayBorder: boolean;
66
- bgColor: ColorPalette;
67
- rounded: boolean;
68
- borderColor: ColorPalette;
69
- buttonText: string;
70
- buttonTextColor: ColorPalette;
71
- buttonColor: ColorPalette;
72
- displayShadow: boolean;
73
- displayClear: boolean;
74
- isRequired: boolean;
75
- }, {}>;
76
- export default _default;
77
- type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
78
- type __VLS_TypePropsToRuntimeProps<T> = {
79
- [K in keyof T]-?: {} extends Pick<T, K> ? {
80
- type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
81
- } : {
82
- type: import('vue').PropType<T[K]>;
83
- required: true;
84
- };
85
- };
86
- type __VLS_WithDefaults<P, D> = {
87
- [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
88
- default: D[K];
89
- }> : P[K];
90
- };
91
- type __VLS_Prettify<T> = {
92
- [K in keyof T]: T[K];
93
- } & {};