@puresnake/snake-ui 0.0.0-stage → 0.0.2

package/components/snake-rich-text/snake-rich-text.vue

@@ -0,0 +1,24 @@
+<template>
+    <view class="richtext">
+        <snake-parse :content="datas.myValue"></snake-parse>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component RichText
+ * @description 渲染 CMS 提供的 HTML 内容。
+ */
+
+import type { RichTextProps } from './types';
+
+defineOptions({ name: 'RichText', options: { virtualHost: true, styleIsolation: 'shared' } });
+withDefaults(defineProps<RichTextProps>(), { datas: () => ({}) });
+</script>
+
+<style lang="scss" scoped>
+.richtext {
+    padding: 0 20rpx;
+    white-space: break-word !important;
+}
+</style>

package/components/snake-rich-text/types.ts

@@ -0,0 +1,5 @@
+/** RichText 组件的公开属性。 */
+export interface RichTextProps<Data extends Record<string, any> = Record<string, any>> {
+    /** CMS 装修组件配置数据。 */
+    datas?: Data;
+}

package/components/snake-root-portal/snake-root-portal.vue

@@ -0,0 +1,92 @@
+<template>
+    <!-- #ifdef H5 -->
+    <!-- H5 端使用 teleport 把内容传送到 body -->
+    <teleport to="body">
+        <!-- #endif -->
+        <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
+        <!-- #ifndef MP-DINGTALK -->
+        <!-- 微信/支付宝小程序使用原生 root-portal 组件传送 -->
+        <root-portal>
+            <!-- #endif -->
+            <!-- #endif -->
+            <view
+                :class="['snake-root-portal', `snake-theme-${mode}`, props.customClass]"
+                :data-snake-theme-mode="mode"
+                :style="[themeStyle, props.customStyle]"
+            >
+                <slot />
+            </view>
+            <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
+            <!-- #ifndef MP-DINGTALK -->
+        </root-portal>
+        <!-- #endif -->
+        <!-- #endif -->
+        <!-- #ifdef H5 -->
+    </teleport>
+    <!-- #endif -->
+</template>
+
+<script setup lang="ts">
+/**
+ * @component RootPortal
+ * @description 根节点传送组件：把插槽内容渲染到页面根节点，避免被祖先的 transform、overflow 或层叠上下文影响，解决复杂布局下 fixed 弹层失效的问题。H5 端使用 teleport，微信/支付宝小程序端使用原生 root-portal，App 端通过 renderjs 移动节点，其余平台原位渲染。
+ * @see /components/root-portal
+ */
+import { computed } from 'vue';
+import { darkMode, systemDark, themeStyle } from '../../libs/config/theme';
+import type { RootPortalProps } from './types';
+
+defineOptions({
+    name: 'RootPortal',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+});
+
+const props = defineProps<RootPortalProps>();
+
+// 传送后的内容脱离 snake-config-provider 的子树，需在内层容器重新携带主题变量与暗色 class
+const mode = computed<'light' | 'dark'>(() =>
+    darkMode.value === 'auto' ? (systemDark.value ? 'dark' : 'light') : darkMode.value
+);
+</script>
+
+<!-- #ifdef APP-PLUS -->
+<script module="render" lang="renderjs">
+// renderjs 运行在 webview 的 JS 环境，$ownerInstance 由框架注入，需显式 this 类型 vue-tsc 才能通过
+interface RenderBridge {
+    /** renderjs 桥接的宿主组件实例。 */
+    $ownerInstance?: { $el?: HTMLElement };
+}
+
+/** App 端把组件根节点搬到应用根容器（attach）或移回原位，脱离原父级的 transform/overflow 布局。 */
+function relocate(instance: RenderBridge, attach: boolean): void {
+    const ownerInstance = instance.$ownerInstance;
+    if (!ownerInstance || !ownerInstance.$el) return;
+
+    const root = document.querySelector('uni-app') || document.body;
+    if (attach) {
+        root.appendChild(ownerInstance.$el);
+    } else if (ownerInstance.$el.parentNode === root) {
+        root.removeChild(ownerInstance.$el);
+    }
+}
+
+export default {
+    mounted(this: RenderBridge) {
+        relocate(this, true);
+    },
+    // renderjs 沿用 Vue2 风格生命周期名（与参考实现一致），Vue3 的 eslint 规则在此不适用
+    // eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle
+    beforeDestroy(this: RenderBridge) {
+        relocate(this, false);
+    }
+};
+</script>
+<!-- #endif -->
+
+<style lang="scss" scoped></style>

package/components/snake-root-portal/types.ts

@@ -0,0 +1,9 @@
+import type { StyleValue } from '../../types/global';
+
+/** RootPortal 组件的公开属性。 */
+export interface RootPortalProps {
+    /** 根节点自定义类名。 */
+    customClass?: string;
+    /** 根节点自定义样式。 */
+    customStyle?: StyleValue;
+}

package/components/snake-search/snake-search.vue

@@ -0,0 +1,202 @@
+<template>
+    <view class="snake-search" :class="customClass" :style="[{ margin: margin }, customStyle]" @click="clickHandler">
+        <view
+            class="snake-search__content"
+            :style="{
+                backgroundColor: bgColor,
+                borderRadius: shape === 'round' ? '100rpx' : '10rpx',
+                border: borderStyle,
+                height: `${height}rpx`
+            }"
+        >
+            <view class="snake-search__icon">
+                <snake-icon :size="30" :name="searchIcon" :color="searchIconColor || color" />
+            </view>
+            <input
+                confirm-type="search"
+                :value="modelValue"
+                :focus="focus"
+                :maxlength="Number(maxlength)"
+                :adjust-position="adjustPosition"
+                :placeholder="placeholderText"
+                :placeholder-style="`color: ${placeholderColor}`"
+                class="snake-search__input"
+                type="text"
+                :style="[
+                    {
+                        textAlign: inputAlign,
+                        color: color,
+                        backgroundColor: bgColor,
+                        pointerEvents: disabled ? 'none' : 'auto'
+                    },
+                    inputStyle
+                ]"
+                @blur="blur"
+                @confirm="search"
+                @input="inputChange"
+                @focus="getFocus"
+            />
+            <view v-if="keyword && clearabled && focused" class="snake-search__clear" @click="clear">
+                <snake-icon name="close-circle-fill" size="34" color="var(--snake-color-text-light, #c0c4cc)" />
+            </view>
+        </view>
+        <view
+            :style="[actionStyle]"
+            class="snake-search__action"
+            :class="{ 'snake-search__action--active': showActionBtn || show }"
+            @click.stop.prevent="custom"
+        >
+            {{ actionTextValue }}
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component Search
+ * @description 搜索框，集成了常用搜索框所需功能，支持圆形/方形、清除控件、右侧操作按钮与聚焦动画。
+ * @see /components/search
+ */
+
+import { computed, nextTick, ref, watch } from 'vue';
+import { useLocale } from '../../libs/hooks/useLocale';
+import Icon from '../snake-icon/snake-icon.vue';
+import { searchProps, type SearchEmits } from './types';
+
+defineOptions({ name: 'SnakeSearch', options: { virtualHost: true, styleIsolation: 'shared' } });
+const props = defineProps(searchProps);
+const emit = defineEmits<SearchEmits>();
+const { t } = useLocale('search');
+
+// 输入框当前值，v-model 双向同步
+const keyword = ref(props.modelValue);
+// 控制右侧操作按钮动画展开
+const show = ref(false);
+// 输入框是否处于聚焦中，聚焦时才显示清除控件
+const focused = ref(props.focus);
+
+watch(
+    () => props.modelValue,
+    nVal => {
+        keyword.value = nVal;
+    }
+);
+watch(keyword, nVal => {
+    emit('update:modelValue', nVal);
+    emit('input', nVal);
+    emit('change', nVal);
+});
+
+const placeholderText = computed(() => props.placeholder || t('placeholder'));
+const actionTextValue = computed(() => props.actionText || t('actionText'));
+/** 未开启动画时始终显示操作按钮。 */
+const showActionBtn = computed(() => {
+    if (!props.animation && props.showAction) return true;
+    return false;
+});
+/** 边框样式。 */
+const borderStyle = computed(() => {
+    if (props.borderColor) return `1px solid ${props.borderColor}`;
+    return 'none';
+});
+
+/** 输入事件，同步输入框内容。 */
+function inputChange(event: { detail: unknown }) {
+    const detail = event.detail as { value?: string | number };
+    keyword.value = String(detail?.value ?? '');
+}
+/** 清空输入，延后发出事件避免父组件读取到更新前的值。 */
+function clear() {
+    keyword.value = '';
+    nextTick(() => {
+        emit('clear');
+    });
+}
+/** 确定搜索。 */
+function search(event: { detail: unknown }) {
+    const detail = event.detail as { value?: string | number };
+    emit('search', String(detail?.value ?? ''));
+    try {
+        // #ifdef H5 || MP
+        uni.hideKeyboard();
+        // #endif
+    } catch {
+        /* 平台不支持时忽略 */
+    }
+}
+/** 点击右侧操作按钮。 */
+function custom() {
+    emit('custom', keyword.value);
+    try {
+        // #ifdef H5 || MP
+        uni.hideKeyboard();
+        // #endif
+    } catch {
+        /* 平台不支持时忽略 */
+    }
+}
+/** 获取焦点。 */
+function getFocus() {
+    focused.value = true;
+    if (props.animation && props.showAction) show.value = true;
+    emit('focus', keyword.value);
+}
+/** 失去焦点，延时隐藏清除图标避免清除点击被 blur 抢先吞掉。 */
+function blur() {
+    setTimeout(() => {
+        focused.value = false;
+    }, 100);
+    show.value = false;
+    emit('blur', keyword.value);
+}
+/** 点击搜索框，仅在禁用时发出事件，意味着想跳转真正的搜索页。 */
+function clickHandler() {
+    if (props.disabled) emit('click');
+}
+</script>
+
+<style scoped>
+.snake-search {
+    display: flex;
+    flex: 1;
+    align-items: center;
+}
+.snake-search__content {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    padding: 0 18rpx;
+}
+.snake-search__icon {
+    display: flex;
+    align-items: center;
+}
+.snake-search__input {
+    flex: 1;
+    margin: 0 10rpx;
+    font-size: 28rpx;
+    line-height: 1;
+    color: var(--snake-color-text-muted, #909399);
+}
+.snake-search__clear {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40rpx;
+    height: 100%;
+    border-radius: 50%;
+}
+.snake-search__action {
+    overflow: hidden;
+    width: 0;
+    font-size: 28rpx;
+    color: var(--snake-color-text, #303133);
+    text-align: center;
+    white-space: nowrap;
+    transition: all 0.3s;
+}
+.snake-search__action--active {
+    width: 100rpx;
+    margin-left: 10rpx;
+}
+</style>

package/components/snake-search/types.ts

@@ -0,0 +1,84 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { StyleValue } from '../../types/global';
+
+/** SearchShape 类型定义。 */
+export type SearchShape = 'round' | 'square';
+/** SearchInputAlign 类型定义。 */
+export type SearchInputAlign = 'left' | 'center' | 'right';
+
+/** searchProps 运行时属性及默认值。 */
+export const searchProps = {
+    /** 根节点自定义样式。 */
+    customStyle: { type: [String, Object, Array] as PropType<StyleValue>, default: '' },
+    /** 根节点自定义类名。 */
+    customClass: { type: String, default: '' },
+    /** 搜索框形状，round 圆形，square 方形。 */
+    shape: { type: String as PropType<SearchShape>, default: 'round' },
+    /** 搜索框背景色。 */
+    bgColor: { type: String, default: 'var(--snake-color-surface-muted, #f2f3f6)' },
+    /** 占位提示文字。 */
+    placeholder: { type: String, default: '' },
+    /** 是否启用清除控件。 */
+    clearabled: { type: Boolean, default: true },
+    /** 是否自动聚焦。 */
+    focus: { type: Boolean, default: false },
+    /** 是否在搜索框右侧显示操作按钮。 */
+    showAction: { type: Boolean, default: true },
+    /** 右侧操作按钮的样式，对象形式。 */
+    actionStyle: { type: [Object, Array] as PropType<StyleValue>, default: () => ({}) },
+    /** 右侧操作按钮文字。 */
+    actionText: { type: String, default: '' },
+    /** 输入框内容水平对齐方式。 */
+    inputAlign: { type: String as PropType<SearchInputAlign>, default: 'left' },
+    /** 是否禁用输入框。 */
+    disabled: { type: Boolean, default: false },
+    /** 开启 showAction 时，是否在 input 获取焦点时才显示操作按钮。 */
+    animation: { type: Boolean, default: false },
+    /** 边框颜色，只要配置了颜色，才会有边框。 */
+    borderColor: { type: String, default: 'none' },
+    /** 双向绑定的输入值。 */
+    modelValue: { type: String, default: '' },
+    /** 搜索框高度，数值按 rpx 处理。 */
+    height: { type: [Number, String] as PropType<number | string>, default: 64 },
+    /** 输入框的样式，可以定义文字颜色、大小等，对象形式。 */
+    inputStyle: { type: [Object, Array] as PropType<StyleValue>, default: () => ({}) },
+    /** 输入框最大能输入的长度，-1 为不限制长度。 */
+    maxlength: { type: [Number, String] as PropType<number | string>, default: '-1' },
+    /** 搜索图标的颜色，默认同输入框字体颜色。 */
+    searchIconColor: { type: String, default: '' },
+    /** 输入框字体颜色。 */
+    color: { type: String, default: 'var(--snake-color-text-secondary, #606266)' },
+    /** placeholder 的颜色。 */
+    placeholderColor: { type: String, default: 'var(--snake-color-text-muted, #909399)' },
+    /** 与上下左右元素的间距，带单位的字符串形式。 */
+    margin: { type: String, default: '0' },
+    /** 左侧输入框的图标，可以为图标名称或图片路径。 */
+    searchIcon: { type: String, default: 'search' },
+    /** 弹出键盘时是否自动调节高度。 */
+    adjustPosition: { type: Boolean, default: true }
+} as const;
+
+/** Search 组件的公开属性。 */
+export type SearchProps = ExtractPropTypes<typeof searchProps>;
+
+/** Search 组件的事件契约。 */
+export type SearchEmits = {
+    /** 双向绑定值更新。 */
+    'update:modelValue': [value: string];
+    /** 输入事件，携带输入框内容。 */
+    input: [value: string];
+    /** 内容变化事件，携带输入框内容。 */
+    change: [value: string];
+    /** 用户确定搜索时触发。 */
+    search: [value: string];
+    /** 用户点击右侧操作按钮时触发。 */
+    custom: [value: string];
+    /** 用户点击清除按钮时触发。 */
+    clear: [];
+    /** 输入框获得焦点时触发。 */
+    focus: [value: string];
+    /** 输入框失去焦点时触发。 */
+    blur: [value: string];
+    /** 禁用状态下点击搜索框时触发。 */
+    click: [];
+};