kigumi 0.15.0 → 0.15.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 (9) hide show
  1. package/dist/templates/react/Drawer/Drawer.jsx.hbs +5 -9
  2. package/dist/templates/react/Drawer/Drawer.tsx.hbs +6 -14
  3. package/dist/templates/vue/Drawer/Drawer.js.vue.hbs +4 -11
  4. package/dist/templates/vue/Drawer/Drawer.vue.hbs +4 -11
  5. package/package.json +1 -1
  6. package/templates/react/Drawer/Drawer.jsx.hbs +5 -9
  7. package/templates/react/Drawer/Drawer.tsx.hbs +6 -14
  8. package/templates/vue/Drawer/Drawer.js.vue.hbs +4 -11
  9. package/templates/vue/Drawer/Drawer.vue.hbs +4 -11
package/dist/templates/react/Drawer/Drawer.jsx.hbs CHANGED
@@ -24,6 +24,7 @@ import './Drawer.css';
24
24
  * @typedef {Object} DrawerRef
25
25
  * @property {() => void} show
26
26
  * @property {() => void} hide
27
+ * @property {() => void} requestClose
27
28
  * @property {HTMLElement | null} element
28
29
  *
29
30
  * @param {Object} props
@@ -47,8 +48,9 @@ export const Drawer = React.forwardRef(
47
48
  React.useImperativeHandle(
48
49
  ref,
49
50
  () => ({
50
- show: () => drawerRef.current?.show?.(),
51
- hide: () => drawerRef.current?.hide?.(),
51
+ show: () => { if (drawerRef.current) drawerRef.current.open = true; },
52
+ hide: () => { if (drawerRef.current) drawerRef.current.open = false; },
53
+ requestClose: () => { if (drawerRef.current) drawerRef.current.open = false; },
52
54
  get element() {
53
55
  return drawerRef.current;
54
56
  },
@@ -60,13 +62,7 @@ export const Drawer = React.forwardRef(
60
62
  React.useEffect(() => {
61
63
  const el = drawerRef.current;
62
64
  if (!el || open === undefined) return;
63
-
64
- const isOpen = el.open ?? false;
65
- if (open && !isOpen) {
66
- el.show?.();
67
- } else if (!open && isOpen) {
68
- el.hide?.();
69
- }
65
+ el.open = open;
70
66
  }, [open]);
71
67
 
72
68
  // Setup event listeners
package/dist/templates/react/Drawer/Drawer.tsx.hbs CHANGED
@@ -68,23 +68,21 @@ export interface DrawerProps extends Omit<HTMLAttributes<HTMLElement>, 'onShow'
68
68
  export interface DrawerRef {
69
69
  show: () => void;
70
70
  hide: () => void;
71
+ requestClose: () => void;
71
72
  /** Reference to the underlying HTML element */
72
73
  element: HTMLElement | null;
73
74
  }
74
75
 
75
76
  export const Drawer = forwardRef<DrawerRef, DrawerProps>(
76
77
  ({ children, className, open, onShow, onAfterShow, onHide, onAfterHide, ...props }, ref) => {
77
- const drawerRef = useRef<HTMLElement & {
78
- show?: () => void;
79
- hide?: () => void;
80
- open?: boolean;
81
- }>(null);
78
+ const drawerRef = useRef<HTMLElement & { open?: boolean }>(null);
82
79
 
83
80
  useImperativeHandle(
84
81
  ref,
85
82
  () => ({
86
- show: () => drawerRef.current?.show?.(),
87
- hide: () => drawerRef.current?.hide?.(),
83
+ show: () => { if (drawerRef.current) drawerRef.current.open = true; },
84
+ hide: () => { if (drawerRef.current) drawerRef.current.open = false; },
85
+ requestClose: () => { if (drawerRef.current) drawerRef.current.open = false; },
88
86
  get element() {
89
87
  return drawerRef.current;
90
88
  },
@@ -96,13 +94,7 @@ export const Drawer = forwardRef<DrawerRef, DrawerProps>(
96
94
  useEffect(() => {
97
95
  const el = drawerRef.current;
98
96
  if (!el || open === undefined) return;
99
-
100
- const isOpen = el.open ?? false;
101
- if (open && !isOpen) {
102
- el.show?.();
103
- } else if (!open && isOpen) {
104
- el.hide?.();
105
- }
97
+ el.open = open;
106
98
  }, [open]);
107
99
 
108
100
  // Setup event listeners
package/dist/templates/vue/Drawer/Drawer.js.vue.hbs CHANGED
@@ -1,5 +1,5 @@
1
1
  <script setup>
2
- import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
2
+ import { ref, computed, onMounted, onUnmounted } from 'vue';
3
3
  import '{{{importPath}}}';
4
4
  import './Drawer.css';
5
5
 
@@ -28,14 +28,6 @@ const open = defineModel('open', { default: false });
28
28
 
29
29
  const elementRef = ref(null);
30
30
 
31
- watch(open, (newOpen) => {
32
- const el = elementRef.value;
33
- if (!el) return;
34
- const isOpen = el.open ?? false;
35
- if (newOpen && !isOpen) el.show?.();
36
- else if (!newOpen && isOpen) el.hide?.();
37
- });
38
-
39
31
  const handleWaShow = (e) => { open.value = true; emit('wa-show', e); };
40
32
  const handleWaAfterShow = (e) => emit('wa-after-show', e);
41
33
  const handleWaHide = (e) => { open.value = false; emit('wa-hide', e); };
@@ -62,8 +54,9 @@ onUnmounted(() => {
62
54
  });
63
55
 
64
56
  defineExpose({
65
- show: () => elementRef.value?.show?.(),
66
- requestClose: () => elementRef.value?.requestClose?.(),
57
+ show: () => { open.value = true; },
58
+ hide: () => { open.value = false; },
59
+ requestClose: () => { open.value = false; },
67
60
  element: elementRef,
68
61
  });
69
62
  </script>
package/dist/templates/vue/Drawer/Drawer.vue.hbs CHANGED
@@ -1,5 +1,5 @@
1
1
  <script setup lang="ts">
2
- import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
2
+ import { ref, computed, onMounted, onUnmounted } from 'vue';
3
3
  import '{{{importPath}}}';
4
4
  import './Drawer.css';
5
5
 
@@ -35,14 +35,6 @@ const open = defineModel<boolean>('open', { default: false });
35
35
 
36
36
  const elementRef = ref<HTMLElement | null>(null);
37
37
 
38
- watch(open, (newOpen) => {
39
- const el = elementRef.value as any;
40
- if (!el) return;
41
- const isOpen = el.open ?? false;
42
- if (newOpen && !isOpen) el.show?.();
43
- else if (!newOpen && isOpen) el.hide?.();
44
- });
45
-
46
38
  const handleWaShow = (e: Event) => { open.value = true; emit('wa-show', e as CustomEvent); };
47
39
  const handleWaAfterShow = (e: Event) => emit('wa-after-show', e as CustomEvent);
48
40
  const handleWaHide = (e: Event) => { open.value = false; emit('wa-hide', e as CustomEvent); };
@@ -69,8 +61,9 @@ onUnmounted(() => {
69
61
  });
70
62
 
71
63
  defineExpose({
72
- show: () => (elementRef.value as any)?.show?.(),
73
- requestClose: () => (elementRef.value as any)?.requestClose?.(),
64
+ show: () => { open.value = true; },
65
+ hide: () => { open.value = false; },
66
+ requestClose: () => { open.value = false; },
74
67
  element: elementRef,
75
68
  });
76
69
  </script>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kigumi",
3
- "version": "0.15.0",
3
+ "version": "0.15.1",
4
4
  "description": "CLI tool to add Web Awesome components to your project",
5
5
  "type": "module",
6
6
  "bin": {
package/templates/react/Drawer/Drawer.jsx.hbs CHANGED
@@ -24,6 +24,7 @@ import './Drawer.css';
24
24
  * @typedef {Object} DrawerRef
25
25
  * @property {() => void} show
26
26
  * @property {() => void} hide
27
+ * @property {() => void} requestClose
27
28
  * @property {HTMLElement | null} element
28
29
  *
29
30
  * @param {Object} props
@@ -47,8 +48,9 @@ export const Drawer = React.forwardRef(
47
48
  React.useImperativeHandle(
48
49
  ref,
49
50
  () => ({
50
- show: () => drawerRef.current?.show?.(),
51
- hide: () => drawerRef.current?.hide?.(),
51
+ show: () => { if (drawerRef.current) drawerRef.current.open = true; },
52
+ hide: () => { if (drawerRef.current) drawerRef.current.open = false; },
53
+ requestClose: () => { if (drawerRef.current) drawerRef.current.open = false; },
52
54
  get element() {
53
55
  return drawerRef.current;
54
56
  },
@@ -60,13 +62,7 @@ export const Drawer = React.forwardRef(
60
62
  React.useEffect(() => {
61
63
  const el = drawerRef.current;
62
64
  if (!el || open === undefined) return;
63
-
64
- const isOpen = el.open ?? false;
65
- if (open && !isOpen) {
66
- el.show?.();
67
- } else if (!open && isOpen) {
68
- el.hide?.();
69
- }
65
+ el.open = open;
70
66
  }, [open]);
71
67
 
72
68
  // Setup event listeners
package/templates/react/Drawer/Drawer.tsx.hbs CHANGED
@@ -68,23 +68,21 @@ export interface DrawerProps extends Omit<HTMLAttributes<HTMLElement>, 'onShow'
68
68
  export interface DrawerRef {
69
69
  show: () => void;
70
70
  hide: () => void;
71
+ requestClose: () => void;
71
72
  /** Reference to the underlying HTML element */
72
73
  element: HTMLElement | null;
73
74
  }
74
75
 
75
76
  export const Drawer = forwardRef<DrawerRef, DrawerProps>(
76
77
  ({ children, className, open, onShow, onAfterShow, onHide, onAfterHide, ...props }, ref) => {
77
- const drawerRef = useRef<HTMLElement & {
78
- show?: () => void;
79
- hide?: () => void;
80
- open?: boolean;
81
- }>(null);
78
+ const drawerRef = useRef<HTMLElement & { open?: boolean }>(null);
82
79
 
83
80
  useImperativeHandle(
84
81
  ref,
85
82
  () => ({
86
- show: () => drawerRef.current?.show?.(),
87
- hide: () => drawerRef.current?.hide?.(),
83
+ show: () => { if (drawerRef.current) drawerRef.current.open = true; },
84
+ hide: () => { if (drawerRef.current) drawerRef.current.open = false; },
85
+ requestClose: () => { if (drawerRef.current) drawerRef.current.open = false; },
88
86
  get element() {
89
87
  return drawerRef.current;
90
88
  },
@@ -96,13 +94,7 @@ export const Drawer = forwardRef<DrawerRef, DrawerProps>(
96
94
  useEffect(() => {
97
95
  const el = drawerRef.current;
98
96
  if (!el || open === undefined) return;
99
-
100
- const isOpen = el.open ?? false;
101
- if (open && !isOpen) {
102
- el.show?.();
103
- } else if (!open && isOpen) {
104
- el.hide?.();
105
- }
97
+ el.open = open;
106
98
  }, [open]);
107
99
 
108
100
  // Setup event listeners
package/templates/vue/Drawer/Drawer.js.vue.hbs CHANGED
@@ -1,5 +1,5 @@
1
1
  <script setup>
2
- import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
2
+ import { ref, computed, onMounted, onUnmounted } from 'vue';
3
3
  import '{{{importPath}}}';
4
4
  import './Drawer.css';
5
5
 
@@ -28,14 +28,6 @@ const open = defineModel('open', { default: false });
28
28
 
29
29
  const elementRef = ref(null);
30
30
 
31
- watch(open, (newOpen) => {
32
- const el = elementRef.value;
33
- if (!el) return;
34
- const isOpen = el.open ?? false;
35
- if (newOpen && !isOpen) el.show?.();
36
- else if (!newOpen && isOpen) el.hide?.();
37
- });
38
-
39
31
  const handleWaShow = (e) => { open.value = true; emit('wa-show', e); };
40
32
  const handleWaAfterShow = (e) => emit('wa-after-show', e);
41
33
  const handleWaHide = (e) => { open.value = false; emit('wa-hide', e); };
@@ -62,8 +54,9 @@ onUnmounted(() => {
62
54
  });
63
55
 
64
56
  defineExpose({
65
- show: () => elementRef.value?.show?.(),
66
- requestClose: () => elementRef.value?.requestClose?.(),
57
+ show: () => { open.value = true; },
58
+ hide: () => { open.value = false; },
59
+ requestClose: () => { open.value = false; },
67
60
  element: elementRef,
68
61
  });
69
62
  </script>
package/templates/vue/Drawer/Drawer.vue.hbs CHANGED
@@ -1,5 +1,5 @@
1
1
  <script setup lang="ts">
2
- import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
2
+ import { ref, computed, onMounted, onUnmounted } from 'vue';
3
3
  import '{{{importPath}}}';
4
4
  import './Drawer.css';
5
5
 
@@ -35,14 +35,6 @@ const open = defineModel<boolean>('open', { default: false });
35
35
 
36
36
  const elementRef = ref<HTMLElement | null>(null);
37
37
 
38
- watch(open, (newOpen) => {
39
- const el = elementRef.value as any;
40
- if (!el) return;
41
- const isOpen = el.open ?? false;
42
- if (newOpen && !isOpen) el.show?.();
43
- else if (!newOpen && isOpen) el.hide?.();
44
- });
45
-
46
38
  const handleWaShow = (e: Event) => { open.value = true; emit('wa-show', e as CustomEvent); };
47
39
  const handleWaAfterShow = (e: Event) => emit('wa-after-show', e as CustomEvent);
48
40
  const handleWaHide = (e: Event) => { open.value = false; emit('wa-hide', e as CustomEvent); };
@@ -69,8 +61,9 @@ onUnmounted(() => {
69
61
  });
70
62
 
71
63
  defineExpose({
72
- show: () => (elementRef.value as any)?.show?.(),
73
- requestClose: () => (elementRef.value as any)?.requestClose?.(),
64
+ show: () => { open.value = true; },
65
+ hide: () => { open.value = false; },
66
+ requestClose: () => { open.value = false; },
74
67
  element: elementRef,
75
68
  });
76
69
  </script>