uview-pro 0.3.6 → 0.3.8

package/changelog.md

@@ -1,3 +1,52 @@
+## 0.3.8（2025-11-04）
+
+### 📦‍ Build System | 打包构建
+
+- 新增钉钉小程序运行和打包命令 ([a5b4ab3](https://github.com/anyup/uView-Pro/commit/a5b4ab3abab95b4c56bf02415f1785371f7f19ee))
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **u-circle-progress:** 修复微信小程序 canvas 2d 环形进度条绘制问题,适配不同平台的 canvas 上下文 ([e7ab701](https://github.com/anyup/uView-Pro/commit/e7ab701bcbd83e7861aeb9a104269265c6b38a56))
+
+### ✨ Features | 新功能
+
+- **u-fab:** 新增悬浮按钮组件及演示示例 ([85848de](https://github.com/anyup/uView-Pro/commit/85848de6bae15d91942a633959459ae8e6ecb857))
+- **u-fab:** 优化悬浮组件功能和交互，新增预设定位position、拖动吸边autoStick属性 ([65a4bde](https://github.com/anyup/uView-Pro/commit/65a4bde2331c8b2a49933bb4c5d7e1f97a11c56a))
+- **u-text:** 新增 u-text 组件默认插槽支持 ([a7b6e59](https://github.com/anyup/uView-Pro/commit/a7b6e5944afbcd48920c25a58c07642544ff3d3e))
+
+### ♻️ Code Refactoring | 代码重构
+
+- **fab:** 优化 fab 组件示例代码 ([ca71fa2](https://github.com/anyup/uView-Pro/commit/ca71fa28fa86baa53384eb366384d97a0b8d84b2))
+- **u-fab:** 重构 gap 属性以支持对象类型 ([bee34bf](https://github.com/anyup/uView-Pro/commit/bee34bffd6a7587e9a82fe3e35cc64c096d8d2b3))
+
+### 👥 Contributors
+
+<a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a> <a href="https://github.com/wjp980108"><img src="https://github.com/wjp980108.png?size=40" width="40" height="40" alt="wjp980108" title="wjp980108"/></a>
+
+## 0.3.7（2025-10-28）
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **u-index-list:** 修复 u-index-list 组件中 indexList 的响应式，确保数据正确对应，滚动到正确的锚点 ([536479b](https://github.com/anyup/uView-Pro/commit/536479b0c444f50892c789191265b373297ec0b5))
+- **u-form:** 优化 u-form-item 组件样式，修复微信小程序光标样式偏移问题 ([7e6694b](https://github.com/anyup/uView-Pro/commit/7e6694b5db11f654b081d10bb83d53c99437c730))
+- **u-form:** 优化 model 属性的响应式更新，修复 model 对象整体替换导致的表单校验失效问题 ([bc49b5b](https://github.com/anyup/uView-Pro/commit/bc49b5b2fa6f51c803d64252184f5eba93a0d3c1))
+- **u-form:** 修复 u-form 的重置表单方法 resetFields 失效问题 ([a31f800](https://github.com/anyup/uView-Pro/commit/a31f800e206fa9671bdd0d6a46ca7a4afba6aefd))
+- **u-checkbox:** 修复 u-checkbox 单独使用报错的问题 ([dad2832](https://github.com/anyup/uView-Pro/commit/dad2832a2e7219b0454ec97970c9cb8f4fac0625))
+
+### ✨ Features | 新功能
+
+- **u-textarea:** 新增 u-textarea 组件及演示示例，增强 textarea 功能，分离 u-input 的 textarea 模式 ([efbb75e](https://github.com/anyup/uView-Pro/commit/efbb75e21a044a664267930396ce496fd64d33fe))
+- **u-input:** 增强 u-input 的 textarea 字数统计功能 ([5e14354](https://github.com/anyup/uView-Pro/commit/5e14354a2e34768650cd2417f81b14cdbbced132))
+- **u-form:** 增强表单校验功能，发射校验错误，便于自定义提示 ([a553b53](https://github.com/anyup/uView-Pro/commit/a553b53581cc470938030c0f1f8d5f7671d8c25a))
+
+### ♻️ Code Refactoring | 代码重构
+
+- **form:** 优化表单组件的提示文本 ([04b5fc7](https://github.com/anyup/uView-Pro/commit/04b5fc7a071835425786958c5f6de04e233c151c))
+
+### 👥 Contributors
+
+<a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a>
+
 ## 0.3.6（2025-10-24）
 
 ### ✨ Features | 新功能

package/components/u-checkbox/u-checkbox.vue

@@ -180,7 +180,7 @@ function setValue() {
         emitEvent();
         emit('update:modelValue', false);
     } else {
-        if (!parentExposed.value?.validateSelection()) {
+        if (parentExposed?.value?.validateSelection && !parentExposed?.value?.validateSelection()) {
             return;
         }
         emitEvent();

package/components/u-circle-progress/u-circle-progress.vue

@@ -14,8 +14,10 @@
         "
     >
         <!-- 支付宝小程序不支持canvas-id属性，必须用id属性 -->
+        <!-- #ifdef MP-WEIXIN || MP-TOUTIAO -->
         <canvas
             class="u-canvas-bg"
+            type="2d"
             :canvas-id="elBgId"
             :id="elBgId"
             :style="{
@@ -25,6 +27,7 @@
         ></canvas>
         <canvas
             class="u-canvas"
+            type="2d"
             :canvas-id="elId"
             :id="elId"
             :style="{
@@ -32,6 +35,27 @@
                 height: widthPx + 'px'
             }"
         ></canvas>
+        <!-- #endif -->
+        <!-- #ifndef MP-WEIXIN || MP-TOUTIAO -->
+        <canvas
+            class="u-canvas-bg"
+            :canvas-id="elBgId"
+            :id="elBgId"
+            :style="{
+                width: widthPx + 'px',
+                height: widthPx + 'px'
+            }"
+        ></canvas>
+        <canvas
+            class="u-canvas"
+            :canvas-id="elId"
+            :id="elId"
+            :style="{
+                width: widthPx + 'px',
+                height: widthPx + 'px'
+            }"
+        ></canvas>
+        <!-- #endif -->
         <slot></slot>
     </view>
 </template>
@@ -50,9 +74,12 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, getCurrentInstance } from 'vue';
+import { ref, computed, watch, onMounted, getCurrentInstance, onBeforeMount } from 'vue';
 import { $u } from '../..';
 import { CircleProgressProps } from './types';
+// #ifdef MP-WEIXIN || MP-TOUTIAO
+import { canvas2d } from '../../libs/util/canvas-2d';
+// #endif
 
 /**
  * circleProgress 环形进度条
@@ -72,12 +99,17 @@ const props = defineProps(CircleProgressProps);
 
 let elBgId = $u.guid(); // 非微信端的时候，需用动态的id，否则一个页面多个圆形进度条组件数据会混乱
 let elId = $u.guid();
-// #ifdef MP-WEIXIN
-elBgId = 'uCircleProgressBgId'; // 微信小程序中不能使用$u.guid()形式动态生成id值，否则会报错
-elId = 'uCircleProgressElId';
+// #ifdef MP-WEIXIN || MP-TOUTIAO
+// elBgId = 'uCircleProgressBgId'; // 微信小程序中不能使用$u.guid()形式动态生成id值，否则会报错
+// elId = 'uCircleProgressElId';
 // #endif
 const instance = getCurrentInstance();
 
+const pixelRatio = ref<number>(1); // 像素比
+
+// 存储 MP-WEIXIN 下通过 selectorQuery 获取到的 canvas node，方便在绘制前清空
+const canvasNodeMap = new Map<string, any>();
+
 const widthPx = computed(() =>
     typeof uni !== 'undefined' && uni.upx2px ? uni.upx2px(Number(props.width)) : Number(props.width)
 );
@@ -99,6 +131,10 @@ const circleColor = computed(() => {
     return props.activeColor;
 });
 
+onBeforeMount(() => {
+    pixelRatio.value = uni.getSystemInfoSync().pixelRatio;
+});
+
 // 监听percent变化，动态绘制进度
 watch(
     () => props.percent,
@@ -126,11 +162,55 @@ onMounted(() => {
     }, 50);
 });
 
+/**
+ * 获取canvas上下文
+ */
+function getContext(canvasId) {
+    return new Promise<UniApp.CanvasContext>(resolve => {
+        let ctx = null;
+        // #ifndef MP-WEIXIN || MP-TOUTIAO
+        ctx = uni.createCanvasContext(canvasId, instance);
+        resolve(ctx);
+        // #endif
+        // #ifdef MP-WEIXIN || MP-TOUTIAO
+        uni.createSelectorQuery()
+            .in(instance?.proxy)
+            .select(`#${canvasId}`)
+            .node(res => {
+                if (res && res.node) {
+                    const canvas = res.node;
+                    ctx = canvas2d(canvas.getContext('2d') as CanvasRenderingContext2D);
+                    canvas.width = widthPx.value * pixelRatio.value;
+                    canvas.height = widthPx.value * pixelRatio.value;
+                    ctx.scale(pixelRatio.value, pixelRatio.value);
+                    // 存储 canvas node，后续绘制时用于清空画布
+                    canvasNodeMap.set(canvasId, canvas);
+                    resolve(ctx);
+                }
+            })
+            .exec();
+        // #endif
+    });
+}
+
 /**
  * 绘制底部灰色圆环
  */
-function drawProgressBg() {
-    const ctx = uni.createCanvasContext(elBgId, instance);
+async function drawProgressBg() {
+    const ctx = await getContext(elBgId);
+    // #ifdef MP-WEIXIN || MP-TOUTIAO
+    // 清空背景画布（如果可用）以确保绘制一致性
+    try {
+        if (typeof ctx.clearRect === 'function') {
+            const node = canvasNodeMap.get(elBgId);
+            const w = node ? node.width : widthPx.value * pixelRatio.value;
+            const h = node ? node.height : widthPx.value * pixelRatio.value;
+            ctx.clearRect(0, 0, w, h);
+        }
+    } catch (e) {
+        // ignore
+    }
+    // #endif
     ctx.setLineWidth(borderWidthPx.value); // 设置圆环宽度
     ctx.setStrokeStyle(props.inactiveColor); // 线条颜色
     ctx.beginPath(); // 开始描绘路径
@@ -144,13 +224,26 @@ function drawProgressBg() {
  * 绘制进度圆环
  * @param progress 当前进度
  */
-function drawCircleByProgress(progress: number) {
+async function drawCircleByProgress(progress: number) {
     // 第一次操作进度环时将上下文保存到了this.data中，直接使用即可
     let ctx = progressContext.value;
     if (!ctx) {
-        ctx = uni.createCanvasContext(elId, instance);
+        ctx = await getContext(elId);
         progressContext.value = ctx;
     }
+    // #ifdef MP-WEIXIN || MP-TOUTIAO
+    // 清空进度画布，避免旧的更大进度残留，导致无法降低的视觉错误
+    try {
+        if (typeof ctx.clearRect === 'function') {
+            const node = canvasNodeMap.get(elId);
+            const w = node ? node.width : widthPx.value * pixelRatio.value;
+            const h = node ? node.height : widthPx.value * pixelRatio.value;
+            ctx.clearRect(0, 0, w, h);
+        }
+    } catch (e) {
+        // ignore
+    }
+    // #endif
     // 表示进度的两端为圆形
     ctx.setLineCap('round');
     // 设置线条的宽度和颜色

package/components/u-fab/types.ts

@@ -0,0 +1,75 @@
+import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
+import type { FabDirection, FabGap, FabPosition, ThemeType } from '../../types/global';
+import { baseProps } from '../common/props';
+
+/**
+ * fab 悬浮按钮类型定义
+ * @description 供 u-fab 组件 props 使用
+ */
+
+export const FabProps = {
+    ...baseProps,
+    /** 按钮的预置样式，primary，info，error，warning，success */
+    type: { type: String as PropType<ThemeType>, default: 'primary' },
+    /** 是否禁止状态 */
+    disabled: { type: Boolean, default: false },
+    /** 按钮能否可以拖动 */
+    draggable: { type: Boolean, default: false },
+    /** 按钮与边缘的间距，单位 px。支持 number 或对象 {top,left,right,bottom}，优先级按键存在顺序 */
+    gap: {
+        type: Object as PropType<FabGap>,
+        default: () => ({
+            top: 16,
+            left: 16,
+            right: 16,
+            bottom: 16
+        })
+    },
+    /** 拖动结束时是否自动吸边（仅当 draggable 为 true 时生效） */
+    autoStick: { type: Boolean, default: true },
+    /** 预设定位：控制组件默认停靠位置 */
+    position: {
+        type: String as PropType<FabPosition>,
+        default: 'right-bottom'
+    },
+    /** 菜单出现的方向 */
+    direction: { type: String as PropType<FabDirection>, default: 'top' },
+    /** 按钮自定义层级 */
+    zIndex: { type: Number, default: 99 }
+};
+
+export type FabProps = ExtractPropTypes<typeof FabProps>;
+
+interface DirectionConfig {
+    opposite: keyof CSSProperties;
+    sizeKey: 'width' | 'height';
+    positionKey: 'left' | 'top';
+    flexBase: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+}
+
+export const directionConfig: Record<FabDirection, DirectionConfig> = {
+    top: {
+        opposite: 'bottom',
+        sizeKey: 'width',
+        positionKey: 'left',
+        flexBase: 'column'
+    },
+    bottom: {
+        opposite: 'top',
+        sizeKey: 'width',
+        positionKey: 'left',
+        flexBase: 'column-reverse'
+    },
+    left: {
+        opposite: 'right',
+        sizeKey: 'height',
+        positionKey: 'top',
+        flexBase: 'row'
+    },
+    right: {
+        opposite: 'left',
+        sizeKey: 'height',
+        positionKey: 'top',
+        flexBase: 'row-reverse'
+    }
+};

package/components/u-fab/u-fab.vue

@@ -0,0 +1,328 @@
+<template>
+    <view
+        class="u-fab"
+        :style="$u.toStyle(fabStyle, customStyle)"
+        :class="[customClass]"
+        @touchstart="handleTouchstart"
+        @touchmove.stop.prevent="handleTouchmove"
+        @touchend="handleTouchend"
+    >
+        <view class="u-fab-trigger" id="trigger">
+            <slot name="trigger">
+                <u-button
+                    custom-class="u-fab-trigger-btn"
+                    custom-style="width:112rpx;height:112rpx;border-radius:112rpx;"
+                    :type="type"
+                    :disabled="disabled"
+                    :throttle-time="0"
+                    @click="handleBtnClick"
+                >
+                    <u-icon :name="expansion ? 'close' : 'plus'" size="36rpx"></u-icon>
+                </u-button>
+            </slot>
+        </view>
+        <view class="u-fab-actions" id="actions" :class="{ 'u-fab-actions__show': expansion }" :style="actionsStyle">
+            <slot></slot>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-fab',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { directionConfig, FabProps } from './types.ts';
+import { computed, getCurrentInstance, onMounted, reactive, ref, useSlots, watch } from 'vue';
+import { $u } from '../../';
+
+const props = defineProps(FabProps);
+const emit = defineEmits(['trigger']);
+
+const slots = useSlots();
+const instance = getCurrentInstance();
+const sysInfo = $u.sys();
+const dragging = ref(true);
+const minLeft = ref(0);
+const maxLeft = ref(0);
+const minTop = ref(0);
+const maxTop = ref(0);
+const expansion = ref(false);
+const direction = ref(props.direction);
+const effectiveWindowHeight = ref(sysInfo.windowHeight);
+// #ifdef H5
+effectiveWindowHeight.value = sysInfo.windowTop + sysInfo.windowHeight;
+// #endif
+const position = reactive({
+    top: 0,
+    left: 0
+});
+const actions = ref();
+const btnInfo = ref({
+    width: 56,
+    height: 56
+});
+const start = reactive({
+    x: 0,
+    y: 0
+});
+
+// 计算悬浮按钮样式
+const fabStyle = computed(() => {
+    const style: Record<string, any> = {
+        transition: dragging.value ? 'none' : 'all 0.3s ease',
+        zIndex: props.zIndex,
+        left: `${position.left}px`,
+        top: `${position.top}px`
+    };
+    return style;
+});
+
+// 动画样式
+const actionsStyle = computed(() => {
+    const config = directionConfig[direction.value];
+    const base: Record<string, any> = {
+        [config.opposite]: '100%',
+        [config.sizeKey]: '100%',
+        [config.positionKey]: 0,
+        flexDirection: config.flexBase,
+        transition: 'all 0.28s cubic-bezier(0.3, 0, 0.2, 1)'
+    };
+
+    // 展开/收缩动画：根据方向设置初始偏移
+    const offset = 12; // rpx/px 相对轻微偏移，视觉更顺滑
+    if (expansion.value) {
+        base.transform = 'translate3d(0,0,0) scale(1)';
+        base.opacity = 1;
+    } else {
+        // 隐藏时做一个方向上的微位移并缩放以优化动画感
+        if (direction.value === 'top') base.transform = `translate3d(0, ${offset}px, 0) scale(0.96)`;
+        else if (direction.value === 'bottom') base.transform = `translate3d(0, -${offset}px, 0) scale(0.96)`;
+        else if (direction.value === 'left') base.transform = `translate3d(${offset}px, 0, 0) scale(0.96)`;
+        else base.transform = `translate3d(-${offset}px, 0, 0) scale(0.96)`;
+        base.opacity = 0;
+    }
+
+    return base;
+});
+
+watch(
+    () => [props.position, props.gap],
+    () => {
+        initPosition();
+    }
+);
+
+watch(
+    () => props.direction,
+    () => {
+        if (expansion.value) direction.value = calcDirection();
+    }
+);
+
+// helper：支持 gap 为 number 或对象形式
+function getGap(side: 'top' | 'left' | 'right' | 'bottom') {
+    const g = props.gap as any;
+    if (typeof g === 'number') return g;
+    if (g && typeof g === 'object' && g[side] !== undefined) return Number(g[side]);
+    return 0;
+}
+
+// 拖动开始事件
+function handleTouchstart(e: TouchEvent) {
+    if (props.disabled || !props.draggable) return;
+
+    const touches = e.touches[0];
+    start.x = touches.clientX;
+    start.y = touches.clientY;
+    dragging.value = true;
+}
+
+// 拖动移动事件
+function handleTouchmove(e: TouchEvent) {
+    if (props.disabled || !props.draggable) return;
+
+    const touches = e.touches[0];
+    const deltaX = touches.clientX - start.x;
+    const deltaY = touches.clientY - start.y;
+
+    position.left += deltaX;
+    position.top += deltaY;
+
+    start.x = touches.clientX;
+    start.y = touches.clientY;
+
+    // 设置边界，防止拖出边界
+    position.left = Math.max(minLeft.value, Math.min(maxLeft.value, position.left));
+    position.top = Math.max(minTop.value, Math.min(maxTop.value, position.top));
+}
+
+// 拖动结束事件
+function handleTouchend() {
+    if (props.disabled || !props.draggable) return;
+
+    dragging.value = false;
+
+    // 如果 autoStick 为 false，则释放后不进行自动吸边，仅做边界限制
+    if (props.autoStick === false) {
+        position.left = Math.max(minLeft.value, Math.min(maxLeft.value, position.left));
+        position.top = Math.max(minTop.value, Math.min(maxTop.value, position.top));
+        return;
+    }
+
+    const middle = sysInfo.windowWidth / 2;
+    const buttonCenter = position.left + btnInfo.value.width / 2;
+
+    // 自动吸边，按钮中心位置大于视口的一半时，自动依附在右边，不然就是左边
+    position.left =
+        buttonCenter > middle ? sysInfo.windowWidth - btnInfo.value.width - getGap('right') : getGap('left');
+
+    if (expansion.value) direction.value = calcDirection();
+}
+
+// 按钮点击事件
+function handleBtnClick() {
+    if (slots?.default) {
+        expansion.value = !expansion.value;
+        if (expansion.value) direction.value = calcDirection();
+    } else {
+        emit('trigger');
+    }
+}
+
+// 计算方向
+function calcDirection() {
+    if (!actions.value) return props.direction;
+
+    let dir = props.direction;
+
+    const actionsHeight = actions.value?.height || 0;
+    const actionsWidth = actions.value?.width || 0;
+
+    // 菜单展开时，如果位置不够，则反转方向
+    if (dir === 'top') {
+        // 按钮上方剩余空间: 按钮顶部 - 顶部边距
+        if (position.top - minTop.value < actionsHeight) dir = 'bottom';
+    } else if (dir === 'bottom') {
+        // 按钮下方剩余空间: 有效窗口高度 - (按钮顶部 + 按钮高 + 边距)
+        const bottom = effectiveWindowHeight.value - (position.top + btnInfo.value.height + getGap('bottom'));
+        if (bottom < actionsHeight) dir = 'top';
+    } else if (dir === 'left') {
+        // 按钮左侧剩余空间: 有效窗口宽度 - 边距
+        if (position.left - getGap('left') < actionsWidth) dir = 'right';
+    } else if (dir === 'right') {
+        // 按钮右侧剩余空间: 有效窗口宽度 - (按钮左侧 + 按钮宽 + 边距)
+        const right = sysInfo.windowWidth - (position.left + btnInfo.value.width + getGap('right'));
+        if (right < actionsWidth) dir = 'left';
+    }
+
+    return dir;
+}
+
+// 初始化位置
+function initPosition() {
+    // 根据 props.position 计算初始 left/top
+    const pos = props.position || 'right-bottom';
+    const winW = sysInfo.windowWidth;
+    const winH = effectiveWindowHeight.value;
+
+    switch (pos) {
+        case 'left-top':
+            position.left = getGap('left');
+            position.top = getGap('top') + sysInfo.windowTop;
+            break;
+        case 'right-top':
+            position.left = winW - btnInfo.value.width - getGap('right');
+            position.top = getGap('top') + sysInfo.windowTop;
+            break;
+        case 'left-bottom':
+            position.left = getGap('left');
+            position.top = winH - btnInfo.value.height - getGap('bottom');
+            break;
+        case 'right-bottom':
+            position.left = winW - btnInfo.value.width - getGap('right');
+            position.top = winH - btnInfo.value.height - getGap('bottom');
+            break;
+        case 'left-center':
+            position.left = getGap('left');
+            position.top = Math.round((winH - btnInfo.value.height) / 2);
+            break;
+        case 'right-center':
+            position.left = winW - btnInfo.value.width - getGap('right');
+            position.top = Math.round((winH - btnInfo.value.height) / 2);
+            break;
+        case 'top-center':
+            position.left = Math.round((winW - btnInfo.value.width) / 2);
+            position.top = getGap('top') + sysInfo.windowTop;
+            break;
+        case 'bottom-center':
+            position.left = Math.round((winW - btnInfo.value.width) / 2);
+            position.top = winH - btnInfo.value.height - getGap('bottom');
+            break;
+        default:
+            position.left = winW - btnInfo.value.width - getGap('right');
+            position.top = winH - btnInfo.value.height - getGap('bottom');
+            break;
+    }
+}
+
+onMounted(async () => {
+    btnInfo.value = await $u.getRect('#trigger', instance);
+    actions.value = await $u.getRect('#actions', instance);
+
+    initPosition();
+
+    minLeft.value = getGap('left');
+    minTop.value = getGap('top') + sysInfo.windowTop;
+    maxLeft.value = sysInfo.windowWidth - btnInfo.value.width - getGap('right');
+    maxTop.value = effectiveWindowHeight.value - btnInfo.value.height - getGap('bottom');
+});
+
+defineExpose({
+    toggle: handleBtnClick
+});
+</script>
+
+<style scoped lang="scss">
+.u-fab {
+    position: fixed;
+
+    .u-fab-trigger {
+        :deep(.u-fab-trigger-btn) {
+            width: 112rpx;
+            height: 112rpx;
+            border-radius: 112rpx;
+
+            &::after {
+                border-radius: 112rpx;
+            }
+        }
+    }
+
+    .u-fab-actions {
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        visibility: hidden;
+        opacity: 0;
+        transform-origin: center;
+        will-change: transform, opacity;
+        transition: all 0.28s cubic-bezier(0.3, 0, 0.2, 1);
+
+        &.u-fab-actions__show {
+            visibility: visible;
+            opacity: 1;
+        }
+    }
+}
+</style>