feat: new slots

zouyaoji · Mar 11, 2022 · 8b652bf · 8b652bf
1 parent b562a0b
commit 8b652bf
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 24 deletions.
diff --git a/packages/components/ui/fab/fab.ts b/packages/components/ui/fab/fab.ts
@@ -30,34 +30,40 @@ export default defineComponent({
       hideOnRouteChange
     })
 
+    const slotScope = computed(() => ({ opened: showing.value }))
+
     const classes = computed(
       () =>
         'vc-fab z-fab row inline justify-center' +
         ` vc-fab--align-${props.verticalActionsAlign} ${formClass.value}` +
-        (showing.value === true ? ' vc-fab--opened' : '')
+        (showing.value === true ? ' vc-fab--opened' : ' vc-fab--closed')
     )
 
-    const actionClass = computed(() => 'vc-fab__actions flex no-wrap inline' + ` vc-fab__actions--${props.direction}`)
+    const actionClass = computed(
+      () =>
+        'vc-fab__actions flex no-wrap inline' +
+        ` vc-fab__actions--${props.direction}` +
+        ` vc-fab__actions--${showing.value === true ? 'opened' : 'closed'}`
+    )
+
+    const iconHolderClass = computed(() => 'vc-fab__icon-holder ' + ` vc-fab__icon-holder--${showing.value === true ? 'opened' : 'closed'}`)
+
+    function getIcon(kebab, camel) {
+      const slotFn = slots[kebab]
+      const classes = `q-fab__${kebab} absolute-full`
+
+      return slotFn === void 0 ? h(VcIcon, { class: classes, name: props[kebab] as any }) : h('div', { class: classes }, slotFn(slotScope.value))
+    }
 
     function getTriggerContent() {
       const child: Array<VNode> = []
 
       props.hideIcon !== true &&
-        child.push(
-          h('div', { class: 'vc-fab__icon-holder' }, [
-            h(VcIcon, {
-              class: 'vc-fab__icon absolute-full',
-              name: props.icon
-            }),
+        child.push(h('div', { class: iconHolderClass.value }, [getIcon('icon', 'icon'), getIcon('active-icon', 'activeIcon')]))
 
-            h(VcIcon, {
-              class: 'vc-fab__active-icon absolute-full',
-              name: props.activeIcon
-            })
-          ])
-        )
-
-      props.label !== '' && child[labelProps.value.action](h('div', labelProps.value.data, [props.label]))
+      if (props.label !== '' || slots.label !== void 0) {
+        child[labelProps.value.action](h('div', labelProps.value.data, slots.label !== void 0 ? slots.label(slotScope.value) : [props.label]))
+      }
 
       return hMergeSlot(slots.tooltip, child)
     }

diff --git a/packages/components/ui/icon/index.ts b/packages/components/ui/icon/index.ts
@@ -20,7 +20,7 @@ export const iconProps = {
 export default defineComponent({
   name: 'VcIcon',
   props: iconProps,
-  setup(props, { slots }) {
+  setup(props: VcIconProps, { slots }) {
     const sizeStyle = useSize(props)
     const style = computed(() => {
       const css: CSSProperties | null = sizeStyle.value
@@ -187,33 +187,33 @@ export default defineComponent({
   }
 })
 
-// export type VcIconProps = ExtractPropTypes<typeof iconProps>
 export interface VcIconProps {
   /**
    * Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl).
    */
-  size?: string | undefined
+  size?: string
   /**
    * HTML tag to render, unless no icon is supplied or it's an svg icon.
    * Default value: i
    */
-  tag?: string | undefined
+  tag?: string
   /**
    * Name of the icon, following VueCesium convention.
    */
-  name?: string | undefined
+  name?: string
   /**
    * Color name for component from the css color palette.
    */
-  color?: string | undefined
+  color?: string
+  hoverColor?: string
   /**
    * Useful if icon is on the left side of something: applies a standard margin on the right side of Icon.
    */
-  left?: boolean | undefined
+  left?: boolean
   /**
    * Useful if icon is on the right side of something: applies a standard margin on the left side of Icon.
    */
-  right?: boolean | undefined
+  right?: boolean
 }
 
 export interface VcIconSlots {