@bobbykim/manguito-theme 0.18.0 → 0.20.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 (68) hide show
  1. package/LICENSE.md +1 -1
  2. package/README.md +12 -12
  3. package/dist/core.cjs +2 -0
  4. package/dist/core.d.ts +790 -0
  5. package/dist/core.js +2175 -0
  6. package/dist/mcl-theme.cjs +1 -0
  7. package/dist/mcl-theme.d.ts +12 -0
  8. package/dist/mcl-theme.js +608 -0
  9. package/package.json +28 -7
  10. package/CHANGELOG.md +0 -150
  11. package/index.d.ts +0 -14
  12. package/index.js +0 -19
  13. package/index.ts +0 -31
  14. package/lib/alert/Alert.vue +0 -92
  15. package/lib/alert/Alert.vue.d.ts +0 -65
  16. package/lib/collapse/Collapse.vue +0 -118
  17. package/lib/collapse/Collapse.vue.d.ts +0 -55
  18. package/lib/composables/index.d.ts +0 -1
  19. package/lib/composables/index.js +0 -1
  20. package/lib/composables/index.ts +0 -1
  21. package/lib/composables/observeVisible.d.ts +0 -6
  22. package/lib/composables/observeVisible.js +0 -24
  23. package/lib/composables/observeVisible.ts +0 -30
  24. package/lib/directives/index.d.ts +0 -6
  25. package/lib/directives/index.js +0 -186
  26. package/lib/directives/index.ts +0 -211
  27. package/lib/directives/index.types.d.ts +0 -14
  28. package/lib/directives/index.types.js +0 -1
  29. package/lib/directives/index.types.ts +0 -15
  30. package/lib/dropdown/DropdownContainer.vue +0 -50
  31. package/lib/dropdown/DropdownContainer.vue.d.ts +0 -19
  32. package/lib/dropdown/DropdownContent.vue +0 -69
  33. package/lib/dropdown/DropdownContent.vue.d.ts +0 -42
  34. package/lib/dropdown/index.types.d.ts +0 -4
  35. package/lib/dropdown/index.types.js +0 -1
  36. package/lib/dropdown/index.types.ts +0 -4
  37. package/lib/header/HeaderHorizontal.vue +0 -158
  38. package/lib/header/HeaderHorizontal.vue.d.ts +0 -84
  39. package/lib/header/HeaderVertical.vue +0 -116
  40. package/lib/header/HeaderVertical.vue.d.ts +0 -70
  41. package/lib/header/NavDrawer.vue +0 -121
  42. package/lib/header/NavDrawer.vue.d.ts +0 -43
  43. package/lib/header/index.types.d.ts +0 -1
  44. package/lib/header/index.types.js +0 -1
  45. package/lib/header/index.types.ts +0 -1
  46. package/lib/modal/Modal.vue +0 -213
  47. package/lib/modal/Modal.vue.d.ts +0 -108
  48. package/lib/sidebar/Sidebar.vue +0 -242
  49. package/lib/sidebar/Sidebar.vue.d.ts +0 -113
  50. package/lib/theme/generateClass.d.ts +0 -2
  51. package/lib/theme/generateClass.js +0 -18
  52. package/lib/theme/generateClass.ts +0 -25
  53. package/lib/theme/index.d.ts +0 -95
  54. package/lib/theme/index.js +0 -642
  55. package/lib/theme/index.ts +0 -676
  56. package/lib/theme/theme.d.ts +0 -89
  57. package/lib/theme/theme.js +0 -851
  58. package/lib/theme/theme.ts +0 -893
  59. package/lib/theme/theme.types.d.ts +0 -21
  60. package/lib/theme/theme.types.js +0 -1
  61. package/lib/theme/theme.types.ts +0 -68
  62. package/lib/tooltip/index.d.ts +0 -62
  63. package/lib/tooltip/index.js +0 -71
  64. package/lib/tooltip/index.ts +0 -76
  65. package/themeVariables.cjs +0 -607
  66. package/tsconfig.json +0 -5
  67. package/tsconfig.ts.json +0 -9
  68. package/tsconfig.vue.json +0 -9
package/package.json CHANGED
@@ -1,24 +1,45 @@
1
1
  {
2
2
  "name": "@bobbykim/manguito-theme",
3
- "version": "0.18.0",
3
+ "version": "0.20.0",
4
4
  "description": "main theme file for manguito components library. Other MCL components will need to import this file to run.",
5
5
  "type": "module",
6
- "main": "index.ts",
7
6
  "publishConfig": {
8
7
  "access": "public"
9
8
  },
9
+ "files": [
10
+ "dist"
11
+ ],
12
+ "main": "./dist/core.cjs",
13
+ "module": "./dist/core.js",
14
+ "types": "./dist/core.d.ts",
15
+ "exports": {
16
+ ".": {
17
+ "import": "./dist/core.js",
18
+ "require": "./dist/core.cjs",
19
+ "types": "./dist/core.d.ts"
20
+ },
21
+ "./mcl-theme": {
22
+ "import": "./dist/mcl-theme.js",
23
+ "require": "./dist/mcl-theme.cjs",
24
+ "types": "./dist/mcl-theme.d.ts"
25
+ }
26
+ },
10
27
  "scripts": {
11
- "build": "vue-tsc --project tsconfig.vue.json && tsc --project tsconfig.ts.json"
28
+ "build": "vite build"
12
29
  },
13
30
  "dependencies": {
14
31
  "@vueuse/core": "^10.8.0",
15
32
  "vue": "^3.3.10"
16
33
  },
17
34
  "devDependencies": {
18
- "autoprefixer": "^10.4.16",
19
- "postcss": "^8.4.32",
35
+ "@vitejs/plugin-vue": "^4.5.2",
20
36
  "sass": "^1.69.5",
21
- "tailwindcss": "^3.3.6"
37
+ "tailwindcss": "^3.3.6",
38
+ "typescript": "^5.3.3",
39
+ "vite": "^4.5.1",
40
+ "vite-plugin-css-injected-by-js": "^3.5.0",
41
+ "vite-plugin-dts": "^3.8.3",
42
+ "vue-tsc": "^1.8.25"
22
43
  },
23
44
  "author": {
24
45
  "name": "Bobby Kim",
@@ -30,5 +51,5 @@
30
51
  "url": "https://github.com/bobbykim89/manguito-component-library.git"
31
52
  },
32
53
  "license": "MIT",
33
- "gitHead": "969800695a9a902bc9d0c19ad6ab002caace8061"
54
+ "gitHead": "2e677770b8628a9616237cd3812af2dcb20ee5bb"
34
55
  }
package/CHANGELOG.md DELETED
@@ -1,150 +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.18.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.17.0...@bobbykim/manguito-theme@0.18.0) (2024-04-01)
7
-
8
-
9
- ### Features
10
-
11
- * **manguito-theme:** update alert component event, update readme files, update story files ([99d4a7e](https://github.com/bobbykim89/manguito-component-library/commit/99d4a7ef192dfb628cf5b37b1cce34bb33aeb4c1))
12
- * **manguito-theme:** update observeVisibleAttr composable, add alert component ([1629762](https://github.com/bobbykim89/manguito-component-library/commit/16297624b667066bd7076b02001f0ca8db65630d))
13
- * ready for production ([4e2fc04](https://github.com/bobbykim89/manguito-component-library/commit/4e2fc048edd67791b4e917e0a764f301d4c610cb))
14
-
15
-
16
-
17
-
18
-
19
- # [0.17.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.15.0...@bobbykim/manguito-theme@0.17.0) (2024-03-24)
20
-
21
-
22
- ### Features
23
-
24
- * build and release ([a372086](https://github.com/bobbykim89/manguito-component-library/commit/a3720861fb40dd6ec1d0e3dda1f06e2479967432))
25
- * code refactor ([8a025e7](https://github.com/bobbykim89/manguito-component-library/commit/8a025e7cf870ff3dd0cb35878a08793e99ec5cef))
26
- * **components/*:** prepublish build ([c8eb95a](https://github.com/bobbykim89/manguito-component-library/commit/c8eb95a0ede6727bf183d2e9ad634ae64af1411d))
27
- * **manguito-theme:** add header-vertical component ([05c339d](https://github.com/bobbykim89/manguito-component-library/commit/05c339d77cdded35d2e45a5c22c3833329e41532))
28
- * **manguito-theme:** add new base component header-horizontal ([d3826ee](https://github.com/bobbykim89/manguito-component-library/commit/d3826ee1da15ea0edd2fa7f959269704f22008b3))
29
- * **manguito-theme:** code refactor ([d310131](https://github.com/bobbykim89/manguito-component-library/commit/d31013189fa5e1c4f8085de63a08ee2932652f55))
30
- * **mcl-header-a:** wip) update mcl-header-a ([344a13f](https://github.com/bobbykim89/manguito-component-library/commit/344a13f3cd25c6b02fc99866f19ae65bc89d9ec5))
31
- * **mcl-header-b:** add mobile layout for mcl-header-b ([ca961ec](https://github.com/bobbykim89/manguito-component-library/commit/ca961ecbaecab1d2e879cb62e905e713878539c0))
32
- * **mcl-header-b:** add more layouts for desktop screen ([bfd1c7e](https://github.com/bobbykim89/manguito-component-library/commit/bfd1c7e8ed3d9b839bea0dd1a7c3b5740a345c41))
33
- * **mcl-header-b:** fix minor issues with mcl closing collapses in menu item click, update text color of menu items ([1ecfcf3](https://github.com/bobbykim89/manguito-component-library/commit/1ecfcf3ec474e6a6097a34bb9861cbb680280530))
34
- * **mcl-header-b:** wip) adding story file for mcl-header-b ([2a80675](https://github.com/bobbykim89/manguito-component-library/commit/2a8067553df9a138398aef2a898ebdf3b4a9a268))
35
- * **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))
36
- * tsconfig update, slots and emits update ([c30ff80](https://github.com/bobbykim89/manguito-component-library/commit/c30ff804c961d205ac097e20cd51285a15ca8966))
37
-
38
-
39
-
40
-
41
-
42
- # [0.16.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.15.0...@bobbykim/manguito-theme@0.16.0) (2024-03-21)
43
-
44
-
45
- ### Features
46
-
47
- * code refactor ([8a025e7](https://github.com/bobbykim89/manguito-component-library/commit/8a025e7cf870ff3dd0cb35878a08793e99ec5cef))
48
- * **manguito-theme:** add header-vertical component ([05c339d](https://github.com/bobbykim89/manguito-component-library/commit/05c339d77cdded35d2e45a5c22c3833329e41532))
49
- * **manguito-theme:** add new base component header-horizontal ([d3826ee](https://github.com/bobbykim89/manguito-component-library/commit/d3826ee1da15ea0edd2fa7f959269704f22008b3))
50
- * **mcl-header-a:** wip) update mcl-header-a ([344a13f](https://github.com/bobbykim89/manguito-component-library/commit/344a13f3cd25c6b02fc99866f19ae65bc89d9ec5))
51
- * **mcl-header-b:** add mobile layout for mcl-header-b ([ca961ec](https://github.com/bobbykim89/manguito-component-library/commit/ca961ecbaecab1d2e879cb62e905e713878539c0))
52
- * **mcl-header-b:** add more layouts for desktop screen ([bfd1c7e](https://github.com/bobbykim89/manguito-component-library/commit/bfd1c7e8ed3d9b839bea0dd1a7c3b5740a345c41))
53
- * **mcl-header-b:** fix minor issues with mcl closing collapses in menu item click, update text color of menu items ([1ecfcf3](https://github.com/bobbykim89/manguito-component-library/commit/1ecfcf3ec474e6a6097a34bb9861cbb680280530))
54
- * **mcl-header-b:** wip) adding story file for mcl-header-b ([2a80675](https://github.com/bobbykim89/manguito-component-library/commit/2a8067553df9a138398aef2a898ebdf3b4a9a268))
55
- * **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))
56
- * tsconfig update, slots and emits update ([c30ff80](https://github.com/bobbykim89/manguito-component-library/commit/c30ff804c961d205ac097e20cd51285a15ca8966))
57
-
58
-
59
-
60
-
61
-
62
- # [0.15.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.14.0...@bobbykim/manguito-theme@0.15.0) (2024-02-27)
63
-
64
-
65
- ### Features
66
-
67
- * **/components/**/README.md,/deprecated:** update readme files, move deprecated packages to deprecated folder ([c0f8f7d](https://github.com/bobbykim89/manguito-component-library/commit/c0f8f7df158b8fcd99b4e3d191e02e3c8a9c144d))
68
-
69
-
70
-
71
-
72
-
73
- # [0.14.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.13.0...@bobbykim/manguito-theme@0.14.0) (2024-02-27)
74
-
75
-
76
- ### Features
77
-
78
- * **components/*:** run package:build ([fcc2d09](https://github.com/bobbykim89/manguito-component-library/commit/fcc2d0953d77ecaa317be27eb212c927dec33b17))
79
- * **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))
80
- * **mcl-collapse:** add mcl-collapse component library and add story for mcl-collapse-a ([397b63e](https://github.com/bobbykim89/manguito-component-library/commit/397b63e00b83801bdf1cd2c6710d0ba876c6bf87))
81
- * **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))
82
- * **stories:** add basic addons, add stories for theme and base component ([841d8db](https://github.com/bobbykim89/manguito-component-library/commit/841d8db015d3d861f567ae3d19cf0033b28bac7c))
83
-
84
-
85
-
86
-
87
-
88
- # [0.13.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.12.0...@bobbykim/manguito-theme@0.13.0) (2023-12-06)
89
-
90
-
91
- ### Features
92
-
93
- * **tsconfig,-card-delta:** card-delta bug fix, update tsconfig ([4c469b9](https://github.com/bobbykim89/manguito-component-library/commit/4c469b933632e3e729f6b75f7e808c89c090d463))
94
- * **tsconfig:** install dependencies and update tsconfig to not generate source map ([0bd4d4c](https://github.com/bobbykim89/manguito-component-library/commit/0bd4d4c78503ef156dbb3d49aa3e67e7e0e68289))
95
-
96
-
97
-
98
-
99
-
100
- # [0.12.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.11.0...@bobbykim/manguito-theme@0.12.0) (2023-12-02)
101
-
102
-
103
- ### Features
104
-
105
- * **manguito-theme,accordion-alpha,accordion-beta,nav-alpha:** change tsconfig settings ([055e6d8](https://github.com/bobbykim89/manguito-component-library/commit/055e6d8781705fcc144769da90470eb0d5e36612))
106
-
107
-
108
-
109
-
110
-
111
- # [0.11.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.10.0...@bobbykim/manguito-theme@0.11.0) (2023-12-02)
112
-
113
-
114
- ### Features
115
-
116
- * **manguito-theme:** update import path ([c6c69fa](https://github.com/bobbykim89/manguito-component-library/commit/c6c69fa416e6ff7f388d97f8663a8e77b2e806d3))
117
-
118
-
119
-
120
-
121
-
122
- # [0.10.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.9.0...@bobbykim/manguito-theme@0.10.0) (2023-12-01)
123
-
124
-
125
- ### Features
126
-
127
- * **tsconfig:** update tsconfig file and some of import paths ([c7caaa3](https://github.com/bobbykim89/manguito-component-library/commit/c7caaa3101a5d57d0e799568f1c4f5cbebececc3))
128
-
129
-
130
-
131
-
132
-
133
- # [0.9.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.8.0...@bobbykim/manguito-theme@0.9.0) (2023-12-01)
134
-
135
-
136
- ### Features
137
-
138
- * **components:** target version update ([fe78575](https://github.com/bobbykim89/manguito-component-library/commit/fe78575f5e82bb854333672c3853956e9e930044))
139
-
140
-
141
-
142
-
143
-
144
- # [0.8.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.7.0...@bobbykim/manguito-theme@0.8.0) (2023-12-01)
145
-
146
-
147
- ### Features
148
-
149
- * prerelease run build ([f7a852c](https://github.com/bobbykim89/manguito-component-library/commit/f7a852c9bf12b77481bf5d2f1602e50367d834f8))
150
- * **tsconfig.json,tsconfig.vue.json:** update tsconfig ([0f21861](https://github.com/bobbykim89/manguito-component-library/commit/0f2186167342314f5d218e789a68c03cf6faa8ff))
package/index.d.ts DELETED
@@ -1,14 +0,0 @@
1
- import { generateClass } from './lib/theme/generateClass';
2
- import Alert from './lib/alert/Alert.vue';
3
- import Collapse from './lib/collapse/Collapse.vue';
4
- import DropdownContainer from './lib/dropdown/DropdownContainer.vue';
5
- import DropdownContent from './lib/dropdown/DropdownContent.vue';
6
- import HeaderHorizontal from './lib/header/HeaderHorizontal.vue';
7
- import HeaderVertical from './lib/header/HeaderVertical.vue';
8
- import Modal from './lib/modal/Modal.vue';
9
- import Sidebar from './lib/sidebar/Sidebar.vue';
10
- export * from './lib/directives';
11
- export * from './lib/header/index.types';
12
- export * from './lib/theme/theme.types';
13
- export { Alert, Collapse, DropdownContainer, DropdownContent, HeaderHorizontal, HeaderVertical, Modal, Sidebar, };
14
- export default generateClass;
package/index.js DELETED
@@ -1,19 +0,0 @@
1
- // generate class function
2
- import { generateClass } from './lib/theme/generateClass';
3
- // base components
4
- import Alert from './lib/alert/Alert.vue';
5
- import Collapse from './lib/collapse/Collapse.vue';
6
- import DropdownContainer from './lib/dropdown/DropdownContainer.vue';
7
- import DropdownContent from './lib/dropdown/DropdownContent.vue';
8
- import HeaderHorizontal from './lib/header/HeaderHorizontal.vue';
9
- import HeaderVertical from './lib/header/HeaderVertical.vue';
10
- import Modal from './lib/modal/Modal.vue';
11
- import Sidebar from './lib/sidebar/Sidebar.vue';
12
- // directives
13
- export * from './lib/directives';
14
- // types
15
- export * from './lib/header/index.types';
16
- export * from './lib/theme/theme.types';
17
- // export components
18
- export { Alert, Collapse, DropdownContainer, DropdownContent, HeaderHorizontal, HeaderVertical, Modal, Sidebar, };
19
- export default generateClass;
package/index.ts DELETED
@@ -1,31 +0,0 @@
1
- // generate class function
2
- import { generateClass } from './lib/theme/generateClass'
3
- // base components
4
- import Alert from './lib/alert/Alert.vue'
5
- import Collapse from './lib/collapse/Collapse.vue'
6
- import DropdownContainer from './lib/dropdown/DropdownContainer.vue'
7
- import DropdownContent from './lib/dropdown/DropdownContent.vue'
8
- import HeaderHorizontal from './lib/header/HeaderHorizontal.vue'
9
- import HeaderVertical from './lib/header/HeaderVertical.vue'
10
- import Modal from './lib/modal/Modal.vue'
11
- import Sidebar from './lib/sidebar/Sidebar.vue'
12
-
13
- // directives
14
- export * from './lib/directives'
15
- // types
16
- export * from './lib/header/index.types'
17
- export * from './lib/theme/theme.types'
18
-
19
- // export components
20
- export {
21
- Alert,
22
- Collapse,
23
- DropdownContainer,
24
- DropdownContent,
25
- HeaderHorizontal,
26
- HeaderVertical,
27
- Modal,
28
- Sidebar,
29
- }
30
-
31
- export default generateClass
@@ -1,92 +0,0 @@
1
- <script setup lang="ts">
2
- import { computed, ref, watch } from 'vue'
3
- import type { ColorPalette } from '../../'
4
- import generateClass from '../../'
5
- const props = withDefaults(
6
- defineProps<{
7
- color?: ColorPalette
8
- rounded?: boolean
9
- shadow?: boolean
10
- show?: boolean
11
- dismissible?: boolean
12
- }>(),
13
- {
14
- color: 'danger',
15
- rounded: true,
16
- shadow: true,
17
- show: false,
18
- dismissible: false,
19
- }
20
- )
21
-
22
- const slots = defineSlots<{
23
- default: any
24
- }>()
25
-
26
- const emit = defineEmits<{
27
- (e: 'close', event: Event): void
28
- }>()
29
-
30
- const showAlert = ref<boolean>(props.show)
31
- const componentClass = computed<string>(() => {
32
- const { color, rounded, shadow } = props
33
- const classArray: string[] = [generateClass('BGCOLOR', color)]
34
- if (rounded) {
35
- classArray.push('rounded-md')
36
- }
37
- if (shadow) {
38
- classArray.push('drop-shadow-md')
39
- }
40
- return classArray.join(' ')
41
- })
42
- const handleClose = (e: Event) => {
43
- showAlert.value = false
44
- emit('close', e)
45
- }
46
- const closeAlert = () => {
47
- showAlert.value = false
48
- }
49
- watch(
50
- () => props.show,
51
- (newValue) => {
52
- showAlert.value = newValue
53
- }
54
- )
55
- defineExpose({
56
- close: closeAlert,
57
- })
58
- </script>
59
-
60
- <template>
61
- <div
62
- v-if="showAlert"
63
- role="alert"
64
- aria-live="polite"
65
- aria-atomic="true"
66
- class="py-[0.75rem] px-[1.25rem] relative"
67
- :class="[componentClass]"
68
- >
69
- <div class="w-full flex justify-between gap-2xs">
70
- <div class="w-full">
71
- <slot></slot>
72
- </div>
73
- <button
74
- v-if="dismissible"
75
- @click="handleClose"
76
- class="flex items-center opacity-60 hover:opacity-40 transition-opacity duration-300 ease-linear"
77
- >
78
- <svg
79
- xmlns="http://www.w3.org/2000/svg"
80
- viewBox="0 0 384 512"
81
- fill="currentColor"
82
- class="h-xs"
83
- >
84
- <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
85
- <path
86
- 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"
87
- />
88
- </svg>
89
- </button>
90
- </div>
91
- </div>
92
- </template>
@@ -1,65 +0,0 @@
1
- import type { ColorPalette } from '../../';
2
- declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
3
- color?: ColorPalette | undefined;
4
- rounded?: boolean | undefined;
5
- shadow?: boolean | undefined;
6
- show?: boolean | undefined;
7
- dismissible?: boolean | undefined;
8
- }>, {
9
- color: string;
10
- rounded: boolean;
11
- shadow: boolean;
12
- show: boolean;
13
- dismissible: boolean;
14
- }>, {
15
- close: () => void;
16
- }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
17
- close: (event: Event) => void;
18
- }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
19
- color?: ColorPalette | undefined;
20
- rounded?: boolean | undefined;
21
- shadow?: boolean | undefined;
22
- show?: boolean | undefined;
23
- dismissible?: boolean | undefined;
24
- }>, {
25
- color: string;
26
- rounded: boolean;
27
- shadow: boolean;
28
- show: boolean;
29
- dismissible: boolean;
30
- }>>> & {
31
- onClose?: ((event: Event) => any) | undefined;
32
- }, {
33
- color: ColorPalette;
34
- shadow: boolean;
35
- rounded: boolean;
36
- show: boolean;
37
- dismissible: boolean;
38
- }, {}>, Readonly<{
39
- default: any;
40
- }> & {
41
- default: any;
42
- }>;
43
- export default _default;
44
- type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
45
- type __VLS_TypePropsToRuntimeProps<T> = {
46
- [K in keyof T]-?: {} extends Pick<T, K> ? {
47
- type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
48
- } : {
49
- type: import('vue').PropType<T[K]>;
50
- required: true;
51
- };
52
- };
53
- type __VLS_WithDefaults<P, D> = {
54
- [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
55
- default: D[K];
56
- }> : P[K];
57
- };
58
- type __VLS_Prettify<T> = {
59
- [K in keyof T]: T[K];
60
- } & {};
61
- type __VLS_WithTemplateSlots<T, S> = T & {
62
- new (): {
63
- $slots: S;
64
- };
65
- };
@@ -1,118 +0,0 @@
1
- <script setup lang="ts">
2
- import { Transition, ref, watch } from 'vue'
3
- import { observeVisibleAttr } from '../composables'
4
-
5
- const props = withDefaults(
6
- defineProps<{
7
- accordion?: string
8
- className?: string
9
- visible?: boolean
10
- }>(),
11
- {
12
- className: '',
13
- visible: false,
14
- }
15
- )
16
- const slots = defineSlots<{
17
- default: any
18
- }>()
19
- const emit = defineEmits<{
20
- (e: 'open', visible: boolean): void
21
- (e: 'close', visible: boolean): void
22
- }>()
23
- const collapseRef = ref<HTMLElement | undefined>()
24
- const toggle = ref<boolean>(props.visible)
25
-
26
- const toggleCollapse = (): void => {
27
- toggle.value = !toggle.value
28
- }
29
- const openCollapse = (): void => {
30
- toggle.value = true
31
- }
32
- const closeCollapse = (): void => {
33
- toggle.value = false
34
- }
35
- const emitOpenEvent = () => {
36
- emit('open', true)
37
- }
38
- const emitCloseEvent = () => {
39
- emit('close', false)
40
- }
41
-
42
- /**
43
- * @TransitionFunctions
44
- * @param {HTMLElement} el - passed any since transition handlers don't accept HTMLElement (accepts Element)
45
- */
46
- const onEnter = (el: any) => {
47
- el.style.height = 'auto'
48
- el.style.opacity = '0'
49
- const endWidth = getComputedStyle(el).height
50
- el.style.height = '0px'
51
- el.offsetHeight // force repaint
52
- el.style.height = endWidth
53
- el.style.opacity = '1'
54
- }
55
- const onAfterEnter = (el: any) => {
56
- el.style.height = 'auto'
57
- el.style.opacity = '1'
58
- }
59
- const onLeave = (el: any) => {
60
- el.style.height = getComputedStyle(el).height
61
- el.offsetHeight // force repaint
62
- el.style.height = '0px'
63
- el.style.opacity = '0'
64
- }
65
-
66
- // set nutation observer watching `visible` attribute in element
67
- const handleVisibility = (visible: boolean = false) => {
68
- toggle.value = visible
69
- }
70
- observeVisibleAttr(collapseRef, handleVisibility)
71
-
72
- watch(
73
- () => props.visible,
74
- (newValue) => {
75
- toggle.value = newValue
76
- }
77
- )
78
- watch(toggle, (newValue) => {
79
- if (newValue === true) {
80
- emitOpenEvent()
81
- } else if (newValue === false) {
82
- emitCloseEvent()
83
- }
84
- })
85
- defineExpose({
86
- toggle: toggleCollapse,
87
- close: closeCollapse,
88
- open: openCollapse,
89
- })
90
- </script>
91
-
92
- <template>
93
- <div :accordion="accordion" :visible="toggle" ref="collapseRef">
94
- <transition
95
- name="collapse"
96
- tag="div"
97
- @enter="onEnter"
98
- @after-enter="onAfterEnter"
99
- @leave="onLeave"
100
- class="overflow-y-clip"
101
- >
102
- <div v-show="toggle">
103
- <div :class="[className]">
104
- <slot />
105
- </div>
106
- </div>
107
- </transition>
108
- </div>
109
- </template>
110
-
111
- <style scoped lang="scss">
112
- .collapse-enter-active,
113
- .collapse-leave-active {
114
- transition-property: height, opacity;
115
- transition-duration: 500ms;
116
- transition-timing-function: ease;
117
- }
118
- </style>
@@ -1,55 +0,0 @@
1
- declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
2
- accordion?: string | undefined;
3
- className?: string | undefined;
4
- visible?: boolean | undefined;
5
- }>, {
6
- className: string;
7
- visible: boolean;
8
- }>, {
9
- toggle: () => void;
10
- close: () => void;
11
- open: () => void;
12
- }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
13
- open: (visible: boolean) => void;
14
- close: (visible: boolean) => void;
15
- }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
16
- accordion?: string | undefined;
17
- className?: string | undefined;
18
- visible?: boolean | undefined;
19
- }>, {
20
- className: string;
21
- visible: boolean;
22
- }>>> & {
23
- onOpen?: ((visible: boolean) => any) | undefined;
24
- onClose?: ((visible: boolean) => any) | undefined;
25
- }, {
26
- visible: boolean;
27
- className: string;
28
- }, {}>, Readonly<{
29
- default: any;
30
- }> & {
31
- default: any;
32
- }>;
33
- export default _default;
34
- type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
35
- type __VLS_TypePropsToRuntimeProps<T> = {
36
- [K in keyof T]-?: {} extends Pick<T, K> ? {
37
- type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
38
- } : {
39
- type: import('vue').PropType<T[K]>;
40
- required: true;
41
- };
42
- };
43
- type __VLS_WithDefaults<P, D> = {
44
- [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
45
- default: D[K];
46
- }> : P[K];
47
- };
48
- type __VLS_Prettify<T> = {
49
- [K in keyof T]: T[K];
50
- } & {};
51
- type __VLS_WithTemplateSlots<T, S> = T & {
52
- new (): {
53
- $slots: S;
54
- };
55
- };
@@ -1 +0,0 @@
1
- export * from './observeVisible.js';
@@ -1 +0,0 @@
1
- export * from './observeVisible.js';
@@ -1 +0,0 @@
1
- export * from './observeVisible.js'
@@ -1,6 +0,0 @@
1
- import type { Ref } from 'vue';
2
- export declare const observeVisibleAttr: (el: Ref, fn: (...args: any[]) => void) => {
3
- isSupported: import("vue").ComputedRef<boolean>;
4
- stop: () => void;
5
- takeRecords: () => MutationRecord[] | undefined;
6
- };
@@ -1,24 +0,0 @@
1
- import { useMutationObserver } from '@vueuse/core';
2
- export const observeVisibleAttr = (el, fn) => {
3
- return useMutationObserver(el, (mutations) => {
4
- let changed = false;
5
- for (let i = 0; i < mutations.length && !changed; i++) {
6
- const mutation = mutations[i];
7
- const mutationType = mutation.type;
8
- const mutationAttr = mutation.attributeName;
9
- const mutationTarget = mutation.target;
10
- if (mutationType === 'attributes') {
11
- changed = true;
12
- }
13
- else if (mutationAttr === 'visible') {
14
- changed = true;
15
- }
16
- if (changed) {
17
- const visibleAttr = mutationTarget.getAttribute('visible') === 'true'
18
- ? true
19
- : false;
20
- fn(visibleAttr);
21
- }
22
- }
23
- }, { attributes: true });
24
- };