@witchcraft/ui 0.4.0-beta.6 → 0.4.0-beta.8

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 (10) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/runtime/components/WCombobox/WCombobox.vue +2 -2
  3. package/dist/runtime/components/WPopover/WPopover.d.vue.ts +4 -2
  4. package/dist/runtime/components/WPopover/WPopover.vue +13 -6
  5. package/dist/runtime/components/WPopover/WPopover.vue.d.ts +4 -2
  6. package/dist/runtime/components/WPopup/WPopup.vue +2 -2
  7. package/package.json +1 -1
  8. package/src/runtime/components/WCombobox/WCombobox.vue +2 -2
  9. package/src/runtime/components/WPopover/WPopover.vue +16 -8
  10. package/src/runtime/components/WPopup/WPopup.vue +2 -2
package/dist/module.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "witchcraftUi",
3
3
  "configKey": "witchcraftUi",
4
- "version": "0.4.0-beta.6",
4
+ "version": "0.4.0-beta.8",
5
5
  "builder": {
6
6
  "@nuxt/module-builder": "1.0.2",
7
7
  "unbuild": "3.6.1"
package/dist/runtime/components/WCombobox/WCombobox.vue CHANGED
@@ -48,8 +48,8 @@
48
48
  has-[input:invalid]:border-danger-500
49
49
  invalid:border-danger-500
50
50
  `,
51
- open && popupSide === 'top' && `rounded-tl-none rounded-tr-none`,
52
- open && popupSide === 'bottom' && `rounded-bl-none rounded-br-none`
51
+ filtered.length > 0 && open && popupSide === 'top' && `rounded-tl-none rounded-tr-none`,
52
+ filtered.length > 0 && open && popupSide === 'bottom' && `rounded-bl-none rounded-br-none`
53
53
  )"
54
54
  >
55
55
  <!-- @vue-expect-error aria/keydown can be defined -->
package/dist/runtime/components/WPopover/WPopover.d.vue.ts CHANGED
@@ -4,7 +4,8 @@ import type { EmitsToProps, PopupConstrainToProps, TailwindClassProp } from "../
4
4
  type __VLS_Props = PopupConstrainToProps & {
5
5
  backdropClass?: string;
6
6
  showBackdrop?: boolean;
7
- animationDirection?: "use-side" | "use-align" | "left" | "right" | "up" | "down";
7
+ showArrow?: boolean;
8
+ animationDirection?: "use-side" | "use-align" | "left" | "right" | "up" | "down" | "show" | "none";
8
9
  /** Overrides teleport target. */
9
10
  to?: string;
10
11
  /** Overrides reka-ui's PopoverRootProps */
@@ -31,7 +32,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
31
32
  constrainHeightTo: number | "trigger" | "available" | string | null;
32
33
  to: string;
33
34
  showBackdrop: boolean;
34
- animationDirection: "use-side" | "use-align" | "left" | "right" | "up" | "down";
35
+ showArrow: boolean;
36
+ animationDirection: "use-side" | "use-align" | "left" | "right" | "up" | "down" | "show" | "none";
35
37
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
36
38
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
37
39
  declare const _default: typeof __VLS_export;
package/dist/runtime/components/WPopover/WPopover.vue CHANGED
@@ -14,7 +14,7 @@
14
14
  <transition>
15
15
  <div
16
16
  v-if="showBackdrop && modelValue"
17
- :class="twMerge(`popup--backdrop absolute inset-0 bg-black/50`, backdropClass)"
17
+ :class="twMerge(`popover--backdrop absolute inset-0 bg-black/50`, backdropClass)"
18
18
  @click="modelValue = false"
19
19
  />
20
20
  </transition>
@@ -38,7 +38,7 @@
38
38
  :style="contentStyle"
39
39
  :class="twMerge(
40
40
  `
41
- popup--content-wrapper
41
+ popover--content
42
42
  focus:outline-none
43
43
  overflow-auto
44
44
  scrollbar-hidden
@@ -71,12 +71,15 @@
71
71
  animationDirection === `down` && `
72
72
  animate-slideInDown
73
73
  `,
74
+ animationDirection === `show` && `
75
+ animate-contentShow
76
+ `,
74
77
  contentProps?.class
75
78
  )"
76
79
  >
77
80
  <div
78
81
  :class="twMerge(`
79
- popup--content
82
+ popover--content-inner
80
83
  flex
81
84
  flex-col
82
85
  bg-neutral-50
@@ -96,13 +99,16 @@
96
99
  </div>
97
100
 
98
101
  <PopoverArrow
99
- class="
102
+ v-if="showArrow"
103
+ :class="twMerge(`
104
+ popover--arrow
100
105
  -mt-px
101
106
  fill-neutral-50
102
107
  dark:fill-neutral-800
103
108
  drop-shadow-[0_2px_1px_rgba(0,0,0,0.3)]
104
109
  relative
105
- "
110
+ stroke-black/30
111
+ `)"
106
112
  />
107
113
  </PopoverContent>
108
114
  </PopoverPortal>
@@ -120,7 +126,7 @@ import {
120
126
  import { usePopupConstrainToStyle } from "../../composables/usePopupConstrainToStyle.js";
121
127
  import { twMerge } from "../../utils/twMerge.js";
122
128
  defineOptions({
123
- name: "WPopup",
129
+ name: "WPopover",
124
130
  inheritAttrs: false
125
131
  });
126
132
  const props = defineProps({
@@ -128,6 +134,7 @@ const props = defineProps({
128
134
  constrainHeightTo: { type: [Number, String, null], required: false, default: "available" },
129
135
  backdropClass: { type: String, required: false },
130
136
  showBackdrop: { type: Boolean, required: false, default: false },
137
+ showArrow: { type: Boolean, required: false, default: true },
131
138
  animationDirection: { type: String, required: false, default: "use-side" },
132
139
  to: { type: String, required: false, default: "#root" },
133
140
  rootProps: { type: Object, required: false },
package/dist/runtime/components/WPopover/WPopover.vue.d.ts CHANGED
@@ -4,7 +4,8 @@ import type { EmitsToProps, PopupConstrainToProps, TailwindClassProp } from "../
4
4
  type __VLS_Props = PopupConstrainToProps & {
5
5
  backdropClass?: string;
6
6
  showBackdrop?: boolean;
7
- animationDirection?: "use-side" | "use-align" | "left" | "right" | "up" | "down";
7
+ showArrow?: boolean;
8
+ animationDirection?: "use-side" | "use-align" | "left" | "right" | "up" | "down" | "show" | "none";
8
9
  /** Overrides teleport target. */
9
10
  to?: string;
10
11
  /** Overrides reka-ui's PopoverRootProps */
@@ -31,7 +32,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
31
32
  constrainHeightTo: number | "trigger" | "available" | string | null;
32
33
  to: string;
33
34
  showBackdrop: boolean;
34
- animationDirection: "use-side" | "use-align" | "left" | "right" | "up" | "down";
35
+ showArrow: boolean;
36
+ animationDirection: "use-side" | "use-align" | "left" | "right" | "up" | "down" | "show" | "none";
35
37
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
36
38
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
37
39
  declare const _default: typeof __VLS_export;
package/dist/runtime/components/WPopup/WPopup.vue CHANGED
@@ -27,7 +27,7 @@
27
27
  <DialogContent
28
28
  v-bind="{ ...contentProps, class: void 0 }"
29
29
  :class="twMerge(`
30
- popup--content-wrapper
30
+ popup--content
31
31
  z-100
32
32
  focus:outline-none
33
33
  fixed
@@ -45,7 +45,7 @@
45
45
  >
46
46
  <div
47
47
  :class="twMerge(`
48
- popup--content
48
+ popup--content-inner
49
49
  flex
50
50
  flex-col
51
51
  bg-neutral-100
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@witchcraft/ui",
3
- "version": "0.4.0-beta.6",
3
+ "version": "0.4.0-beta.8",
4
4
  "description": "Vue component library.",
5
5
  "type": "module",
6
6
  "main": "./dist/runtime/main.lib.js",
package/src/runtime/components/WCombobox/WCombobox.vue CHANGED
@@ -46,8 +46,8 @@
46
46
  has-[input:invalid]:border-danger-500
47
47
  invalid:border-danger-500
48
48
  `,
49
- open && popupSide === 'top' && `rounded-tl-none rounded-tr-none`,
50
- open && popupSide === 'bottom' && `rounded-bl-none rounded-br-none`
49
+ filtered.length > 0 && open && popupSide === 'top' && `rounded-tl-none rounded-tr-none`,
50
+ filtered.length > 0 && open && popupSide === 'bottom' && `rounded-bl-none rounded-br-none`
51
51
  )"
52
52
  >
53
53
  <!-- @vue-expect-error aria/keydown can be defined -->
package/src/runtime/components/WPopover/WPopover.vue CHANGED
@@ -14,7 +14,7 @@
14
14
  <transition>
15
15
  <div
16
16
  v-if="showBackdrop && modelValue"
17
- :class="twMerge(`popup--backdrop absolute inset-0 bg-black/50`, backdropClass)"
17
+ :class="twMerge(`popover--backdrop absolute inset-0 bg-black/50`, backdropClass)"
18
18
  @click="modelValue = false"
19
19
  />
20
20
  </transition>
@@ -37,7 +37,7 @@
37
37
  }"
38
38
  :style="contentStyle"
39
39
  :class="twMerge(`
40
- popup--content-wrapper
40
+ popover--content
41
41
  focus:outline-none
42
42
  overflow-auto
43
43
  scrollbar-hidden
@@ -70,11 +70,14 @@
70
70
  animationDirection === `down` && `
71
71
  animate-slideInDown
72
72
  `,
73
+ animationDirection === `show` && `
74
+ animate-contentShow
75
+ `,
73
76
  contentProps?.class)"
74
77
  >
75
78
  <div
76
79
  :class="twMerge(`
77
- popup--content
80
+ popover--content-inner
78
81
  flex
79
82
  flex-col
80
83
  bg-neutral-50
@@ -94,13 +97,16 @@
94
97
  </div>
95
98
 
96
99
  <PopoverArrow
97
- class="
100
+ v-if="showArrow"
101
+ :class="twMerge(`
102
+ popover--arrow
98
103
  -mt-px
99
104
  fill-neutral-50
100
105
  dark:fill-neutral-800
101
106
  drop-shadow-[0_2px_1px_rgba(0,0,0,0.3)]
102
107
  relative
103
- "
108
+ stroke-black/30
109
+ `)"
104
110
  />
105
111
  </PopoverContent>
106
112
  </PopoverPortal>
@@ -127,7 +133,7 @@ import { twMerge } from "../../utils/twMerge.js"
127
133
 
128
134
  /** Wrapper around reka-ui's `Popover` component. */
129
135
  defineOptions({
130
- name: "WPopup",
136
+ name: "WPopover",
131
137
  inheritAttrs: false
132
138
  })
133
139
 
@@ -136,9 +142,10 @@ const props = withDefaults(defineProps<
136
142
  & PopupConstrainToProps
137
143
  & {
138
144
  backdropClass?: string
139
- /* If true, a backdrop is shown behind the popup. Whether interaction is allowed outside the popover is still determined by `disableOutsidePointerEvents`. */
145
+ /* If true, a backdrop is shown behind the popover. Whether interaction is allowed outside the popover is still determined by `disableOutsidePointerEvents`. */
140
146
  showBackdrop?: boolean
141
- animationDirection?: "use-side" | "use-align" | "left" | "right" | "up" | "down"
147
+ showArrow?: boolean
148
+ animationDirection?: "use-side" | "use-align" | "left" | "right" | "up" | "down" | "show" | "none"
142
149
  /** Overrides teleport target. */
143
150
  to?: string
144
151
  /** Overrides reka-ui's PopoverRootProps */
@@ -148,6 +155,7 @@ const props = withDefaults(defineProps<
148
155
  }
149
156
  >(), {
150
157
  showBackdrop: false,
158
+ showArrow: true,
151
159
  constrainWidthTo: 400,
152
160
  constrainHeightTo: "available",
153
161
  animationDirection: "use-side",
package/src/runtime/components/WPopup/WPopup.vue CHANGED
@@ -28,7 +28,7 @@
28
28
  <DialogContent
29
29
  v-bind="{ ...contentProps, class: undefined }"
30
30
  :class="twMerge(`
31
- popup--content-wrapper
31
+ popup--content
32
32
  z-100
33
33
  focus:outline-none
34
34
  fixed
@@ -46,7 +46,7 @@
46
46
  >
47
47
  <div
48
48
  :class="twMerge(`
49
- popup--content
49
+ popup--content-inner
50
50
  flex
51
51
  flex-col
52
52
  bg-neutral-100