@fastkit/vui 0.13.6 → 0.14.0

package/src/components/VOptionGroup/VOptionGroup.tsx

@@ -6,23 +6,26 @@ import {
   FormSelectorItemGroupControl,
 } from '@fastkit/vue-form-control';
 import {
-  defineSlotsProps,
+  defineSlots,
   VNodeChildOrSlot,
   resolveVNodeChildOrSlots,
-  renderSlotOrEmpty,
 } from '@fastkit/vue-utils';
 import { VUI_SELECT_SYMBOL } from '../../injections';
 
+const slots = defineSlots<{
+  label?: (control: FormSelectorItemGroupControl) => any;
+  default?: () => any;
+}>();
+
 export const VOptionGroup = defineComponent({
   name: 'VOptionGroup',
   props: {
     ...createFormSelectorItemGroupProps(),
     // eslint-disable-next-line vue/require-prop-types
     label: {} as PropType<VNodeChildOrSlot<FormSelectorItemGroupControl>>,
-    ...defineSlotsProps<{
-      label: FormSelectorItemGroupControl;
-    }>(),
+    ...slots(),
   },
+  slots,
   setup(props, ctx) {
     const groupControl = useFormSelectorItemGroupControl(props, ctx, {
       parentNodeType: VUI_SELECT_SYMBOL,
@@ -50,7 +53,7 @@ export const VOptionGroup = defineComponent({
     return (
       <div class={classes}>
         {!!label && <div class="v-option-group__label">{label}</div>}
-        {renderSlotOrEmpty(this.$slots, 'default')}
+        {this.$slots.default?.()}
       </div>
     );
   },

package/src/components/VPaper/VPaper.tsx

@@ -1,26 +1,23 @@
 import './VPaper.scss';
 import { defineComponent, computed, PropType, VNodeProps } from 'vue';
 import { createElevationProps, useElevation } from '../../composables';
-import {
-  renderSlotOrEmpty,
-  defineSlotsProps,
-  htmlAttributesPropOptions,
-} from '@fastkit/vue-utils';
+import { renderSlotOrEmpty, defineSlots } from '@fastkit/vue-utils';
 import { useScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
 
+export const paperBaseSlots = defineSlots<{
+  header?: () => void;
+  default?: () => void;
+  footer?: () => void;
+}>();
+
 export function createPaperBaseProps() {
   return {
-    ...htmlAttributesPropOptions,
     color: String as PropType<ScopeName>,
     tag: {
       type: [String, Object] as PropType<any>,
       default: 'div',
     },
-    ...defineSlotsProps<{
-      header: void;
-      default: void;
-      footer: void;
-    }>(),
+    ...paperBaseSlots(),
   };
 }
 
@@ -42,6 +39,7 @@ export const VPaper = defineComponent({
   name: 'VPaper',
   inheritAttrs: false,
   props: createPaperProps(),
+  slots: paperBaseSlots,
   setup(props, ctx) {
     const tag = computed(() => props.tag);
     const elevation = useElevation(props, { defaultValue: 1 });
@@ -72,7 +70,7 @@ export const VPaper = defineComponent({
               </div>
             )}
             <div class="v-paper__body" {...bodyProps.value}>
-              {renderSlotOrEmpty(ctx.slots, 'default')}
+              {ctx.slots.default?.()}
             </div>
             {footer && (
               <div class="v-paper__footer" {...footerProps.value}>

package/src/components/VRadio/VRadio.tsx

@@ -4,7 +4,6 @@ import {
   createFormSelectorItemSettings,
   useFormSelectorItemControl,
 } from '@fastkit/vue-form-control';
-import { renderSlotOrEmpty } from '@fastkit/vue-utils';
 import { createControlProps, useControl } from '../../composables';
 import { VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL } from '../../injections';
 import { VCheckable } from '../VCheckable';
@@ -48,7 +47,7 @@ export const VRadio = defineComponent({
           input: () =>
             selectorItemControl.createInputElement({ type: 'radio' }),
           faux: () => <span class="v-radio__faux"></span>,
-          label: () => renderSlotOrEmpty(this.$slots, 'default'),
+          label: () => this.$slots.default?.(),
         }}
       />
     );

package/src/components/VSelect/VSelect.tsx

@@ -16,7 +16,7 @@ import {
   FormSelectorItemControl,
 } from '@fastkit/vue-form-control';
 import {
-  defineSlotsProps,
+  defineSlots,
   createPropsOptions,
   VNodeChildOrSlot,
   resolveVNodeChildOrSlots,
@@ -53,6 +53,16 @@ export const KEYBORD_EVENT_TYPES = useKeyboard.Key([
 
 const { props, emits } = createFormSelectorSettings();
 
+const slots = defineSlots<
+  FormControlSlots &
+    InputBoxSlots & {
+      selection?: (ctx: {
+        item: FormSelectorItemControl;
+        index: number;
+      }) => any;
+    }
+>();
+
 export const VSelect = defineComponent({
   name: 'VSelect',
   props: {
@@ -61,12 +71,7 @@ export const VSelect = defineComponent({
     ...createControlFieldProps(),
     ...createControlFieldProviderProps(),
     ...createControlProps(),
-    ...defineSlotsProps<
-      FormControlSlots &
-        InputBoxSlots & {
-          selection: { item: FormSelectorItemControl; index: number };
-        }
-    >(),
+    ...slots(),
     ...createPropsOptions({
       placeholder: String,
       loadingMessage: {} as PropType<VNodeChildOrSlot>,
@@ -74,6 +79,7 @@ export const VSelect = defineComponent({
     }),
     closeOnNavigation: Boolean,
   },
+  slots,
   emits,
   setup(props, ctx) {
     const menuRef: Ref<{ stackMenuControl: VMenuControl } | null> = ref(null);
@@ -282,7 +288,7 @@ export const VSelect = defineComponent({
   },
   render() {
     const { nodeControl, selectorControl, selectorItems, selectedItems } = this;
-    const children = (this.$slots.default && this.$slots.default()) || [];
+    const children = this.$slots.default?.() || [];
     const propGroups = this.propGroups.map((group) => {
       return (
         <VOptionGroup

package/src/components/VSkeltonLoader/VSkeltonLoaderBone.tsx

@@ -1,7 +1,6 @@
 import './VSkeltonLoaderBone.scss';
 
 import { defineComponent } from 'vue';
-import { renderSlotOrEmpty } from '@fastkit/vue-utils';
 
 export const VSkeltonLoaderBone = defineComponent({
   name: 'VSkeltonLoaderBone',
@@ -17,7 +16,7 @@ export const VSkeltonLoaderBone = defineComponent({
       const TagName = props.tag as 'div';
       return (
         <TagName {...ctx.attrs} class="v-skelton-loader-bone">
-          {renderSlotOrEmpty(ctx.slots)}
+          {ctx.slots.default?.()}
         </TagName>
       );
     };

package/src/components/VSwitch/VSwitch.tsx

@@ -4,7 +4,6 @@ import {
   createFormSelectorItemSettings,
   useFormSelectorItemControl,
 } from '@fastkit/vue-form-control';
-import { renderSlotOrEmpty } from '@fastkit/vue-utils';
 import { createControlProps, useControl } from '../../composables';
 import { VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL } from '../../injections';
 import { VCheckable } from '../VCheckable';
@@ -58,7 +57,7 @@ export const VSwitch = defineComponent({
               <span class="v-switch__faux__pin"></span>
             </span>
           ),
-          label: () => renderSlotOrEmpty(this.$slots, 'default'),
+          label: () => this.$slots.default?.(),
         }}
       />
     );

package/src/components/VTabs/VTab.tsx

@@ -8,7 +8,6 @@ import {
 } from 'vue';
 import { RouteLocationRaw } from 'vue-router';
 import { RawIconProp, resolveRawIconProp } from '../VIcon';
-import { renderSlotOrEmpty } from '@fastkit/vue-utils';
 import { RouterLink } from 'vue-router';
 
 export interface VTabExpose {
@@ -54,7 +53,7 @@ export const VTab = defineComponent({
             resolveRawIconProp(active, icon, {
               class: 'v-tab__icon',
             })}
-          {renderSlotOrEmpty(ctx.slots)}
+          {ctx.slots.default?.()}
         </span>
       );
 

package/src/components/VTabs/VTabs.tsx

@@ -13,7 +13,7 @@ import {
 import { RawIconProp } from '../VIcon';
 import { VuiService } from '../../service';
 import { useVui } from '../../injections';
-import { defineSlotsProps } from '@fastkit/vue-utils';
+import { defineSlots } from '@fastkit/vue-utils';
 import { RouteLocationRaw, RouteLocation } from 'vue-router';
 import { VTab, VTabRef } from './VTab';
 import {
@@ -45,6 +45,10 @@ export interface VTabsItem {
   label?: VNodeChild | VTabsItemLabelSlot;
 }
 
+const slots = defineSlots<{
+  item?: (ctx: VTabsItemLabelSlotCtx) => any;
+}>();
+
 export const VTabs = defineComponent({
   name: 'VTabs',
   props: {
@@ -76,17 +80,15 @@ export const VTabs = defineComponent({
      * タブのURLが /page1?tab=xxx のようになる時に設定する
      */
     withQuery: Boolean,
-    ...defineSlotsProps<{
-      item: VTabsItemLabelSlotCtx;
-    }>(),
-
     color: String as PropType<ScopeName>,
     onBeforeChange: Function as PropType<VTabsGuard>,
+    ...slots(),
   },
   emits: {
     'update:modelValue': (newValue: string) => true,
     change: (newValue: string) => true,
   },
+  slots,
   setup(props, ctx) {
     const vui = useVui();
 
@@ -296,7 +298,7 @@ export const VTabs = defineComponent({
 
     return () => {
       const items = computedItemsRef.value;
-      const itemSlot = ctx.slots.item as VTabsItemLabelSlot | undefined;
+      const itemSlot = ctx.slots.item;
       const children = items.map(({ value, active, label, icon, location }) => {
         if (!label) {
           label = itemSlot;

package/src/components/VTextField/VTextField.tsx

@@ -7,7 +7,7 @@ import {
   FormControlSlots,
   TextInputEmits,
 } from '@fastkit/vue-form-control';
-import { defineSlotsProps } from '@fastkit/vue-utils';
+import { defineSlots, ExtractPropInput } from '@fastkit/vue-utils';
 import { VFormControl } from '../VFormControl';
 import {
   VControlField,
@@ -22,10 +22,11 @@ import {
 } from '../../composables';
 import { VTextCounter } from '../VTextCounter';
 import { VUI_TEXT_FIELD_SYMBOL } from '../../injections';
-import { ExtractPropInput } from '@fastkit/vue-utils';
 
 const { props, emits } = createTextInputSettings();
 
+const slots = defineSlots<FormControlSlots & InputBoxSlots>();
+
 function createTextFieldProps() {
   return {
     ...props,
@@ -33,7 +34,7 @@ function createTextFieldProps() {
     ...createControlFieldProps(),
     ...createControlFieldProviderProps(),
     ...createControlProps(),
-    ...defineSlotsProps<FormControlSlots & InputBoxSlots>(),
+    ...slots(),
   };
 }
 
@@ -49,6 +50,7 @@ export const VTextField = defineComponent({
   name: 'VTextField',
   props: createTextFieldProps(),
   emits,
+  slots,
   setup(props, ctx) {
     const inputControl = useTextInputControl(props, ctx, {
       nodeType: VUI_TEXT_FIELD_SYMBOL,

package/src/components/VTextarea/VTextarea.tsx

@@ -6,7 +6,7 @@ import {
   createFormControlProps,
   FormControlSlots,
 } from '@fastkit/vue-form-control';
-import { defineSlotsProps } from '@fastkit/vue-utils';
+import { defineSlots } from '@fastkit/vue-utils';
 import { VFormControl } from '../VFormControl';
 import {
   VControlField,
@@ -24,6 +24,8 @@ import { VUI_TEXTAREA_SYMBOL, useVui } from '../../injections';
 
 const { props, emits } = createTextareaSettings();
 
+const slots = defineSlots<FormControlSlots & InputBoxSlots>();
+
 export const VTextarea = defineComponent({
   name: 'VTextarea',
   props: {
@@ -32,7 +34,7 @@ export const VTextarea = defineComponent({
     ...createControlFieldProps(),
     ...createControlFieldProviderProps(),
     ...createControlProps(),
-    ...defineSlotsProps<FormControlSlots & InputBoxSlots>(),
+    ...slots(),
   },
   emits,
   setup(props, ctx) {

package/src/components/VToolbar/VToolbar.tsx

@@ -1,6 +1,5 @@
 import './VToolbar.scss';
 import { defineComponent, computed } from 'vue';
-import { renderSlotOrEmpty } from '@fastkit/vue-utils';
 import { colorSchemeProps, useColorClasses } from '@fastkit/vue-color-scheme';
 import { createElevationProps, useElevation } from '../../composables';
 import { useVui } from '../../injections';
@@ -35,9 +34,7 @@ export const VToolbar = defineComponent({
 
     return () => {
       return (
-        <div class={['v-toolbar', classes.value]}>
-          {renderSlotOrEmpty(ctx.slots, 'default')}
-        </div>
+        <div class={['v-toolbar', classes.value]}>{ctx.slots.default?.()}</div>
       );
     };
   },

package/src/components/VToolbar/VToolbarMenu.tsx

@@ -1,6 +1,5 @@
 import './VToolbarMenu.scss';
 import { defineComponent } from 'vue';
-import { renderSlotOrEmpty } from '@fastkit/vue-utils';
 import { VButton, vueButtonProps } from '../VButton';
 import { useVui } from '../../injections';
 
@@ -23,7 +22,7 @@ export const VToolbarMenu = defineComponent({
       const variant = props.variant || plain;
       return (
         <VButton {...ctx.attrs} variant={variant} class={['v-toolbar-menu']}>
-          {renderSlotOrEmpty(ctx.slots)}
+          {ctx.slots.default?.()}
         </VButton>
       );
     };

package/src/components/VToolbar/VToolbarTitle.tsx

@@ -1,6 +1,10 @@
 import './VToolbarTitle.scss';
 import { defineComponent, computed } from 'vue';
-import { renderSlotOrEmpty } from '@fastkit/vue-utils';
+import { defineSlots } from '@fastkit/vue-utils';
+
+const slots = defineSlots<{
+  default?: () => any;
+}>();
 
 export const VToolbarTitle = defineComponent({
   name: 'VToolbarTitle',
@@ -9,17 +13,15 @@ export const VToolbarTitle = defineComponent({
       type: String,
       default: 'span',
     },
+    ...slots(),
   },
+  slots,
   setup(props, ctx) {
     const _TagName = computed(() => props.tag);
     return () => {
       const TagName = _TagName.value as 'span';
 
-      return (
-        <TagName class="v-toolbar-title">
-          {renderSlotOrEmpty(ctx.slots, 'default')}
-        </TagName>
-      );
+      return <TagName class="v-toolbar-title">{ctx.slots.default?.()}</TagName>;
     };
   },
 });

package/src/composables/form-selector.tsx

@@ -10,9 +10,8 @@ import {
   FormNodeControl,
 } from '@fastkit/vue-form-control';
 import {
-  defineSlotsProps,
+  defineSlots,
   TypedSlot,
-  renderSlotOrEmpty,
   VNodeChildOrSlot,
   resolveVNodeChildOrSlots,
 } from '@fastkit/vue-utils';
@@ -40,6 +39,12 @@ export interface DefineFormSelectorComponentOptions {
   }) => VNodeChild;
 }
 
+const slots = defineSlots<
+  FormControlSlots & {
+    default?: () => any;
+  }
+>();
+
 export function defineFormSelectorComponent(
   opts: DefineFormSelectorComponentOptions,
 ) {
@@ -62,8 +67,9 @@ export function defineFormSelectorComponent(
       loadingMessage: {} as PropType<VNodeChildOrSlot>,
       // eslint-disable-next-line vue/require-prop-types
       failedToLoadItemsMessage: {} as PropType<VNodeChildOrSlot>,
-      ...defineSlotsProps<FormControlSlots>(),
+      ...slots(),
     },
+    slots,
     emits,
     setup(props, ctx) {
       const selectorControl = useFormSelectorControl(props, ctx, {
@@ -161,7 +167,7 @@ export function defineFormSelectorComponent(
                     </>
                   );
                 })}
-                {renderSlotOrEmpty(this.$slots, 'default')}
+                {this.$slots.default?.()}
               </div>
             ),
           }}

package/src/plugin.tsx

@@ -44,7 +44,7 @@ export function mergeVuiPluginOptions(
   return merged;
 }
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   export interface ComponentCustomProperties {
     $vui: VuiService;
   }