init

unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/cascaderitem/cascaderitem.js

@@ -0,0 +1,343 @@
+"use strict";
+const common_vendor = require("../../../../common/vendor.js");
+const uni_modules_nutuiUni_components__constants_event = require("../_constants/event.js");
+const uni_modules_nutuiUni_components__constants_prefix = require("../_constants/prefix.js");
+require("../_utils/env.js");
+const uni_modules_nutuiUni_components__utils_style = require("../_utils/style.js");
+require("../../locale/locale.js");
+const uni_modules_nutuiUni_locale_useTranslate = require("../../locale/useTranslate.js");
+const uni_modules_nutuiUni_components_cascader_helper = require("../cascader/helper.js");
+const uni_modules_nutuiUni_components_cascader_tree = require("../cascader/tree.js");
+const uni_modules_nutuiUni_components__utils_props = require("../_utils/props.js");
+const cascaderitemProps = {
+  ...uni_modules_nutuiUni_components__utils_props.commonProps,
+  /**
+   * @description 选中值，双向绑定
+   */
+  modelValue: Array,
+  /**
+   * @description 显示选择层
+   */
+  visible: Boolean,
+  /**
+   * @description 级联数据
+   */
+  options: uni_modules_nutuiUni_components__utils_props.makeArrayProp([]),
+  /**
+   * @description 是否开启动态加载
+   */
+  lazy: Boolean,
+  /**
+   * @description 动态加载回调，开启动态加载时生效
+   */
+  lazyLoad: Function,
+  /**
+   * @description 自定义 `options` 结构中 `value` 的字段
+   */
+  valueKey: uni_modules_nutuiUni_components__utils_props.makeStringProp("value"),
+  /**
+   * @description 自定义 `options` 结构中 `text` 的字段
+   */
+  textKey: uni_modules_nutuiUni_components__utils_props.makeStringProp("text"),
+  /**
+   * @description 自定义 `options` 结构中 `children` 的字段
+   */
+  childrenKey: uni_modules_nutuiUni_components__utils_props.makeStringProp("children"),
+  /**
+   * @description 当 `options` 为可转换为树形结构的扁平结构时，配置转换规则
+   */
+  convertConfig: Object,
+  /**
+   * @description 选中底部展示样式 可选值: 'line', 'smile'
+   */
+  titleType: uni_modules_nutuiUni_components__utils_props.makeStringProp("line"),
+  /**
+   * @description 标签栏字体尺寸大小 可选值: 'large', 'normal', 'small'
+   */
+  titleSize: uni_modules_nutuiUni_components__utils_props.makeStringProp("normal"),
+  /**
+   * @description 标签间隙
+   */
+  titleGutter: uni_modules_nutuiUni_components__utils_props.makeNumericProp(0),
+  /**
+   * @description 是否省略过长的标题文字
+   */
+  titleEllipsis: uni_modules_nutuiUni_components__utils_props.truthProp
+};
+const cascaderitemEmits = {
+  [uni_modules_nutuiUni_components__constants_event.UPDATE_MODEL_EVENT]: (value) => true,
+  [uni_modules_nutuiUni_components__constants_event.CHANGE_EVENT]: (value, nodes) => true,
+  pathChange: (value) => true
+};
+if (!Math) {
+  (NutIcon + NutTabPane + NutTabs)();
+}
+const NutIcon = () => "../icon/icon.js";
+const NutTabPane = () => "../tabpane/tabpane.js";
+const NutTabs = () => "../tabs/tabs.js";
+const componentName = `${uni_modules_nutuiUni_components__constants_prefix.PREFIX}-cascader-item`;
+const { translate } = uni_modules_nutuiUni_locale_useTranslate.useTranslate(componentName);
+const __default__ = common_vendor.defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: "shared"
+  }
+});
+const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
+  ...__default__,
+  props: cascaderitemProps,
+  emits: cascaderitemEmits,
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const classes = common_vendor.computed(() => {
+      return uni_modules_nutuiUni_components__utils_style.getMainClass(props, componentName);
+    });
+    const configs = common_vendor.computed(() => ({
+      lazy: props.lazy,
+      lazyLoad: props.lazyLoad,
+      valueKey: props.valueKey,
+      textKey: props.textKey,
+      childrenKey: props.childrenKey,
+      convertConfig: props.convertConfig
+    }));
+    const tabsCursor = common_vendor.ref(0);
+    const initLoading = common_vendor.ref(false);
+    const innerValue = common_vendor.ref(props.modelValue);
+    const tree = common_vendor.ref(new uni_modules_nutuiUni_components_cascader_tree.Tree([], {}));
+    const panes = common_vendor.ref([]);
+    const isLazy = common_vendor.computed(() => configs.value.lazy && Boolean(configs.value.lazyLoad));
+    const lazyLoadMap = /* @__PURE__ */ new Map();
+    let currentProcessNode;
+    async function init() {
+      lazyLoadMap.clear();
+      panes.value = [];
+      tabsCursor.value = 0;
+      initLoading.value = false;
+      currentProcessNode = null;
+      let { options } = props;
+      if (configs.value.convertConfig) {
+        options = uni_modules_nutuiUni_components_cascader_helper.convertListToOptions(options, configs.value.convertConfig);
+      }
+      tree.value = new uni_modules_nutuiUni_components_cascader_tree.Tree(options, {
+        value: configs.value.valueKey,
+        text: configs.value.textKey,
+        children: configs.value.childrenKey
+      });
+      if (isLazy.value && !tree.value.nodes.length) {
+        await invokeLazyLoad({
+          root: true,
+          loading: true,
+          text: "",
+          value: ""
+        });
+      }
+      panes.value = [{ nodes: tree.value.nodes, selectedNode: null }];
+      syncValue();
+    }
+    const methods = {
+      // 选中一个节点，静默模式不触发事件
+      async handleNode(node, silent) {
+        const { disabled, loading } = node;
+        if (!silent && disabled || !panes.value[tabsCursor.value])
+          return;
+        if (tree.value.isLeaf(node, isLazy.value)) {
+          node.leaf = true;
+          panes.value[tabsCursor.value].selectedNode = node;
+          panes.value = panes.value.slice(0, node.level + 1);
+          if (!silent) {
+            const pathNodes = panes.value.map((pane) => pane.selectedNode);
+            emitChange(pathNodes);
+            emit("pathChange", pathNodes);
+          }
+          return;
+        }
+        if (tree.value.hasChildren(node, isLazy.value)) {
+          const level = node.level + 1;
+          panes.value[tabsCursor.value].selectedNode = node;
+          panes.value = panes.value.slice(0, level);
+          panes.value.push({
+            nodes: node.children || [],
+            selectedNode: null
+          });
+          tabsCursor.value = level;
+          if (!silent) {
+            const pathNodes = panes.value.map((pane) => pane.selectedNode);
+            emit("pathChange", pathNodes);
+          }
+          return;
+        }
+        currentProcessNode = node;
+        if (loading)
+          return;
+        await invokeLazyLoad(node);
+        if (currentProcessNode === node) {
+          panes.value[tabsCursor.value].selectedNode = node;
+          methods.handleNode(node, silent);
+        }
+      },
+      handleTabClick(tab) {
+        currentProcessNode = null;
+        tabsCursor.value = Number(tab.paneKey);
+      },
+      isSelected(pane, node) {
+        var _a;
+        return ((_a = pane == null ? void 0 : pane.selectedNode) == null ? void 0 : _a.value) === node.value;
+      }
+    };
+    async function syncValue() {
+      const currentValue = innerValue.value;
+      if (currentValue === void 0 || !tree.value.nodes.length) {
+        return;
+      }
+      if (currentValue.length === 0) {
+        tabsCursor.value = 0;
+        panes.value = [{ nodes: tree.value.nodes, selectedNode: null }];
+        return;
+      }
+      let needToSync = currentValue;
+      if (isLazy.value && Array.isArray(currentValue) && currentValue.length) {
+        needToSync = [];
+        const parent = tree.value.nodes.find((node) => node.value === currentValue[0]);
+        if (parent) {
+          needToSync = [parent.value];
+          initLoading.value = true;
+          const last = await currentValue.slice(1).reduce(async (p, value) => {
+            var _a;
+            const parent2 = await p;
+            await invokeLazyLoad(parent2);
+            const node = (_a = parent2 == null ? void 0 : parent2.children) == null ? void 0 : _a.find((item) => item.value === value);
+            if (node)
+              needToSync.push(value);
+            return Promise.resolve(node);
+          }, Promise.resolve(parent));
+          await invokeLazyLoad(last);
+          initLoading.value = false;
+        }
+      }
+      if (needToSync.length && currentValue === props.modelValue) {
+        const pathNodes = tree.value.getPathNodesByValue(needToSync);
+        pathNodes.forEach((node, index) => {
+          tabsCursor.value = index;
+          methods.handleNode(node, true);
+        });
+      }
+    }
+    async function invokeLazyLoad(node) {
+      if (!node)
+        return;
+      if (!configs.value.lazyLoad) {
+        node.leaf = true;
+        return;
+      }
+      if (tree.value.isLeaf(node, isLazy.value) || tree.value.hasChildren(node, isLazy.value))
+        return;
+      node.loading = true;
+      const parent = node.root ? null : node;
+      let lazyLoadPromise = lazyLoadMap.get(node);
+      if (!lazyLoadPromise) {
+        lazyLoadPromise = new Promise((resolve) => {
+          var _a, _b;
+          (_b = (_a = configs.value).lazyLoad) == null ? void 0 : _b.call(_a, node, resolve);
+        });
+        lazyLoadMap.set(node, lazyLoadPromise);
+      }
+      const nodes = await lazyLoadPromise;
+      if (Array.isArray(nodes) && nodes.length > 0) {
+        tree.value.updateChildren(nodes, parent);
+      } else {
+        node.leaf = true;
+      }
+      node.loading = false;
+      lazyLoadMap.delete(node);
+    }
+    function emitChange(pathNodes) {
+      const emitValue = pathNodes.map((node) => node.value);
+      innerValue.value = emitValue;
+      emit(uni_modules_nutuiUni_components__constants_event.UPDATE_MODEL_EVENT, emitValue);
+      emit(uni_modules_nutuiUni_components__constants_event.CHANGE_EVENT, emitValue, pathNodes);
+    }
+    function formatTabTitle(pane) {
+      return pane.selectedNode ? pane.selectedNode.text : translate("select");
+    }
+    common_vendor.watch(() => [configs.value, props.options], () => {
+      init();
+    }, {
+      deep: true,
+      immediate: true
+    });
+    common_vendor.watch(() => props.modelValue, (value) => {
+      if (value !== innerValue.value) {
+        innerValue.value = value;
+        syncValue();
+      }
+    });
+    common_vendor.watch(() => props.visible, (value) => {
+      if (value && Array.isArray(innerValue.value) && innerValue.value.length > 0) {
+        syncValue();
+      }
+    });
+    return (_ctx, _cache) => {
+      return common_vendor.e({
+        a: !initLoading.value && panes.value.length
+      }, !initLoading.value && panes.value.length ? {
+        b: common_vendor.f(panes.value, (pane, index, i0) => {
+          return {
+            a: common_vendor.f(pane.nodes, (node, k1, i1) => {
+              return common_vendor.e({
+                a: common_vendor.t(node.text),
+                b: node.loading
+              }, node.loading ? {
+                c: "2a1ec3fa-2-" + i0 + "-" + i1 + "," + ("2a1ec3fa-1-" + i0),
+                d: common_vendor.p({
+                  ["custom-class"]: "nut-cascader-item__icon-loading",
+                  loading: true,
+                  name: "loading"
+                })
+              } : {
+                e: "2a1ec3fa-3-" + i0 + "-" + i1 + "," + ("2a1ec3fa-1-" + i0),
+                f: common_vendor.p({
+                  ["custom-class"]: "nut-cascader-item__icon-check",
+                  name: "checklist"
+                })
+              }, {
+                g: methods.isSelected(pane, node) ? 1 : "",
+                h: node.disabled ? 1 : "",
+                i: methods.isSelected(pane, node),
+                j: node.disabled || void 0,
+                k: common_vendor.o(($event) => methods.handleNode(node, false), node.value),
+                l: node.value
+              });
+            }),
+            b: index,
+            c: "2a1ec3fa-1-" + i0 + ",2a1ec3fa-0",
+            d: common_vendor.p({
+              title: formatTabTitle(pane)
+            })
+          };
+        })
+      } : {
+        c: common_vendor.p({
+          title: "Loading..."
+        })
+      }, {
+        d: common_vendor.o(methods.handleTabClick),
+        e: common_vendor.o(($event) => tabsCursor.value = $event),
+        f: common_vendor.p({
+          ["custom-class"]: classes.value,
+          ["custom-style"]: props.customStyle,
+          type: props.titleType,
+          size: props.titleSize,
+          ["title-gutter"]: props.titleGutter,
+          ellipsis: props.titleEllipsis,
+          ["title-scroll"]: true,
+          modelValue: tabsCursor.value
+        })
+      });
+    };
+  }
+});
+wx.createComponent(_sfc_main);
+//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/nutui-uni/components/cascaderitem/cascaderitem.js.map

unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/cascaderitem/cascaderitem.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "nut-icon": "../icon/icon",
+    "nut-tab-pane": "../tabpane/tabpane",
+    "nut-tabs": "../tabs/tabs"
+  }
+}

unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/cascaderitem/cascaderitem.wxml

@@ -0,0 +1 @@
+<nut-tabs wx:if="{{f}}" u-s="{{['d']}}" bindclick="{{d}}" u-i="2a1ec3fa-0" bind:__l="__l" bindupdateModelValue="{{e}}" u-p="{{f}}"><block wx:if="{{a}}"><nut-tab-pane wx:for="{{b}}" wx:for-item="pane" wx:key="b" u-s="{{['d']}}" u-i="{{pane.c}}" bind:__l="__l" u-p="{{pane.d}}"><view class="nut-cascader-pane" role="menu"><scroll-view style="height:100%" scroll-y="{{true}}"><block wx:for="{{pane.a}}" wx:for-item="node" wx:key="l"><view class="{{['nut-cascader-item__inner', node.g && 'active', node.h && 'disabled']}}" role="menuitemradio" aria-checked="{{node.i}}" aria-disabled="{{node.j}}" bindtap="{{node.k}}"><view class="nut-cascader-item__title">{{node.a}}</view><nut-icon wx:if="{{node.b}}" u-i="{{node.c}}" bind:__l="__l" u-p="{{node.d}}"/><nut-icon wx:else u-i="{{node.e}}" bind:__l="__l" u-p="{{node.f||''}}"/></view></block></scroll-view></view></nut-tab-pane></block><block wx:else><nut-tab-pane wx:if="{{c}}" u-s="{{['d']}}" u-i="2a1ec3fa-4,2a1ec3fa-0" bind:__l="__l" u-p="{{c}}"><view class="nut-cascader-pane"/></nut-tab-pane></block></nut-tabs>

unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/cascaderitem/cascaderitem.wxss

@@ -0,0 +1,739 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.nut-theme-dark .nut-cascader .nut-tabs__titles {
+  background: var(--nut-dark-background3, #141414) !important;
+}
+.nut-theme-dark .nut-cascader__bar {
+  color: var(--nut-dark-color, var(--nut-white, #fff));
+  background: var(--nut-dark-background2, #1b1b1b);
+}
+.nut-theme-dark .nut-cascader-item__inner {
+  color: var(--nut-dark-color-gray, var(--nut-text-color, #808080));
+}
+.nut-cascader .nut-tab-pane {
+  padding: 0;
+}
+.nut-cascader .nut-tabs__titles {
+  padding: var(--nut-cascader-tabs-item-padding, 0 10px);
+  background: #fff;
+}
+.nut-cascader-item {
+  width: 100%;
+  font-size: var(--nut-cascader-font-size, var(--nut-font-size-2, 14px));
+  line-height: var(--nut-cascader-line-height, 22px);
+}
+.nut-cascader-item.nut-tabs.horizontal .nut-tabs__titles .nut-tabs__titles-item {
+  flex: initial;
+  padding: var(--nut-cascader-tabs-item-padding, 0 10px);
+  white-space: nowrap;
+}
+.nut-cascader-item__inner {
+  display: flex;
+  align-items: center;
+  padding: var(--nut-cascader-item-padding, 10px 20px);
+  margin: 0;
+  font-size: var(--nut-cascader-item-font-size, var(--nut-font-size-2, 14px));
+  color: var(--nut-cascader-item-color, var(--nut-title-color, #1a1a1a));
+  cursor: pointer;
+}
+.nut-cascader-item__title {
+  flex: 1;
+}
+.nut-cascader-item__icon-check {
+  margin-left: 10px;
+  visibility: hidden;
+}
+.nut-cascader-item__icon-loading {
+  margin-left: 10px;
+}
+.nut-cascader-item.active:not(.disabled) {
+  color: var(--nut-cascader-item-active-color, var(--nut-primary-color, #fa2c19));
+}
+.nut-cascader-item.active .nut-cascader-item__icon-check {
+  color: var(--nut-cascader-item-active-color, var(--nut-primary-color, #fa2c19));
+  visibility: visible;
+}
+.nut-cascader-item.disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.nut-cascader__bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--nut-cascader-bar-padding, 24px 20px 17px);
+  font-size: var(--nut-cascader-bar-font-size, var(--nut-font-size-4, 18px));
+  font-weight: bold;
+  line-height: var(--nut-cascader-bar-line-height, 20px);
+  color: var(--nut-cascader-bar-color, var(--nut-title-color, #1a1a1a));
+  text-align: center;
+}
+.nut-cascader-pane {
+  display: block;
+  width: 100%;
+  height: 342px;
+  padding: 10px 0 0;
+  margin: 0;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.nut-sticky {
+  position: -webkit-sticky;
+  position: sticky;
+}
+.nut-theme-dark .nut-cascader .nut-tabs__titles {
+  background: var(--nut-dark-background3, #141414) !important;
+}
+.nut-theme-dark .nut-cascader__bar {
+  color: var(--nut-dark-color, var(--nut-white, #fff));
+  background: var(--nut-dark-background2, #1b1b1b);
+}
+.nut-theme-dark .nut-cascader-item__inner {
+  color: var(--nut-dark-color-gray, var(--nut-text-color, #808080));
+}
+.nut-cascader .nut-tab-pane {
+  padding: 0;
+}
+.nut-cascader .nut-tabs__titles {
+  padding: var(--nut-cascader-tabs-item-padding, 0 10px);
+  background: #fff;
+}
+.nut-cascader-item {
+  width: 100%;
+  font-size: var(--nut-cascader-font-size, var(--nut-font-size-2, 14px));
+  line-height: var(--nut-cascader-line-height, 22px);
+}
+.nut-cascader-item.nut-tabs.horizontal .nut-tabs__titles .nut-tabs__titles-item {
+  flex: initial;
+  padding: var(--nut-cascader-tabs-item-padding, 0 10px);
+  white-space: nowrap;
+}
+.nut-cascader-item__inner {
+  display: flex;
+  align-items: center;
+  padding: var(--nut-cascader-item-padding, 10px 20px);
+  margin: 0;
+  font-size: var(--nut-cascader-item-font-size, var(--nut-font-size-2, 14px));
+  color: var(--nut-cascader-item-color, var(--nut-title-color, #1a1a1a));
+  cursor: pointer;
+}
+.nut-cascader-item__title {
+  flex: 1;
+}
+.nut-cascader-item__icon-check {
+  margin-left: 10px;
+  visibility: hidden;
+}
+.nut-cascader-item__icon-loading {
+  margin-left: 10px;
+}
+.nut-cascader-item.active:not(.disabled) {
+  color: var(--nut-cascader-item-active-color, var(--nut-primary-color, #fa2c19));
+}
+.nut-cascader-item.active .nut-cascader-item__icon-check {
+  color: var(--nut-cascader-item-active-color, var(--nut-primary-color, #fa2c19));
+  visibility: visible;
+}
+.nut-cascader-item.disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.nut-cascader__bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--nut-cascader-bar-padding, 24px 20px 17px);
+  font-size: var(--nut-cascader-bar-font-size, var(--nut-font-size-4, 18px));
+  font-weight: bold;
+  line-height: var(--nut-cascader-bar-line-height, 20px);
+  color: var(--nut-cascader-bar-color, var(--nut-title-color, #1a1a1a));
+  text-align: center;
+}
+.nut-cascader-pane {
+  display: block;
+  width: 100%;
+  height: 342px;
+  padding: 10px 0 0;
+  margin: 0;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.nut-theme-dark .nut-tabs .nut-tabs__titles {
+  background: var(--nut-dark-background3, #141414);
+}
+.nut-theme-dark .nut-tabs .nut-tabs__titles .nut-tabs__titles-item {
+  color: var(--nut-dark-color-gray, var(--nut-text-color, #808080));
+}
+.nut-theme-dark .nut-tabs .nut-tabs__titles .nut-tabs__titles-item.nut-tabs-active {
+  color: var(--nut-dark-color, var(--nut-white, #fff));
+}
+.nut-theme-dark .nut-tabs.vertical .nut-tabs__titles .nut-tabs__titles-item.nut-tabs-active {
+  background-color: var(--nut-dark-background2, #1b1b1b);
+}
+.nut-tabs {
+  display: flex;
+  overflow: hidden;
+}
+.nut-tabs .nut-tabs__titles {
+  display: flex;
+  flex-shrink: 0;
+  white-space: nowrap;
+  -webkit-user-select: none;
+          user-select: none;
+  background: var(--nut-tabs-titles-background-color, var(--nut-help-color, #f5f5f5));
+  border-radius: var(--nut-tabs-titles-border-radius, 0);
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__list {
+  display: flex;
+  flex-shrink: 0;
+  width: 100%;
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__titles-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--nut-tabs-titles-item-font-size, var(--nut-font-size-2, 14px));
+  color: var(--nut-tabs-titles-item-color, var(--nut-title-color, #1a1a1a));
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__titles-item__text {
+  text-align: center;
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__titles-item__text.ellipsis {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__titles-item__smile .nut-icon {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  font-size: 12px;
+  color: var(--nut-tabs-tab-smile-color, var(--nut-primary-color, #fa2c19));
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__titles-item__smile, .nut-tabs .nut-tabs__titles .nut-tabs__titles-item__line {
+  position: absolute;
+  bottom: 15%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  content: "";
+  border-radius: var(--nut-tabs-titles-item-line-border-radius, 0);
+  opacity: var(--nut-tabs-titles-item-line-opacity, 1);
+  transition: width 0.3s ease;
+  transform: translate(-50%, 0);
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__titles-item.nut-tabs-active {
+  font-weight: bold;
+  color: var(--nut-tabs-titles-item-active-color, var(--nut-title-color, #1a1a1a));
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__titles-item.nut-tabs-active .nut-tabs__titles-item__line {
+  width: var(--nut-tabs-horizontal-titles-item-active-line-width, 40px);
+  height: 3px;
+  content: "";
+  background: var(--nut-tabs-horizontal-tab-line-color, linear-gradient(90deg, var(--nut-primary-color, #fa2c19) 0%, rgba(250, 44, 25, 0.15) 100%));
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__titles-item.disabled {
+  color: var(--nut-disable-color, #ccc);
+}
+.nut-tabs .nut-tabs__titles-left {
+  justify-content: flex-start;
+}
+.nut-tabs.horizontal {
+  flex-direction: column;
+}
+.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles,
+.nut-tabs.horizontal > .nut-tabs__titles {
+  flex-direction: row;
+  height: var(--nut-tabs-horizontal-titles-height, 46px);
+}
+.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__list,
+.nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__list {
+  height: 100%;
+}
+.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles.scrollable,
+.nut-tabs.horizontal > .nut-tabs__titles.scrollable {
+  overflow: auto hidden;
+}
+.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item,
+.nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item {
+  flex: 1 0 auto;
+  width: 0;
+  min-width: var(--nut-tabs-horizontal-titles-item-min-width, 50px);
+}
+.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item__smile .nut-icon,
+.nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item__smile .nut-icon {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  font-size: 12px;
+  color: var(--nut-tabs-tab-smile-color, var(--nut-primary-color, #fa2c19));
+}
+.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item-left,
+.nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item-left {
+  flex: 0 0 auto;
+}
+.nut-tabs.vertical {
+  flex-direction: row;
+  width: 100%;
+}
+.nut-tabs.vertical > .nut-tabs__titles {
+  flex-direction: column;
+  width: var(--nut-tabs-vertical-titles-width, 100px);
+  height: auto;
+  padding: 10px 0;
+}
+.nut-tabs.vertical > .nut-tabs__titles .nut-tabs__list {
+  flex-direction: column;
+}
+.nut-tabs.vertical > .nut-tabs__titles.scrollable {
+  height: auto;
+  overflow: hidden auto;
+}
+.nut-tabs.vertical > .nut-tabs__titles.scrollable .nut-tabs__titles-placeholder {
+  height: 22px;
+}
+.nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item {
+  flex: none;
+  width: 100%;
+  min-width: var(--nut-tabs-horizontal-titles-item-min-width, 50px);
+  height: var(--nut-tabs-vertical-titles-item-height, 40px);
+}
+.nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item__line {
+  bottom: none;
+  width: 0;
+  height: 0;
+  transition: height 0.3s ease;
+  transform: translate(0, -50%);
+}
+.nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item.nut-tabs-active {
+  background-color: #fff;
+}
+.nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item.nut-tabs-active .nut-tabs__titles-item__line {
+  left: 10px;
+  width: 3px;
+  height: var(--nut-tabs-vertical-titles-item-active-line-height, 14px);
+  background: var(--nut-tabs-vertical-tab-line-color, linear-gradient(180deg, var(--nut-primary-color, #fa2c19) 0%, rgba(250, 44, 25, 0.15) 100%));
+}
+.nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item.nut-tabs-active .nut-tabs__titles-item__smile {
+  position: absolute;
+  right: -8px;
+  bottom: 2px;
+  left: auto;
+  width: 36px;
+  height: var(--nut-tabs-vertical-titles-item-active-line-height, 14px);
+  transform: rotate(320deg);
+}
+.nut-tabs.vertical .nut-tabs__content {
+  flex: 1;
+  flex-direction: column;
+}
+.nut-tabs.vertical .nut-tabs__content .nut-tab-pane {
+  height: 100%;
+}
+.nut-tabs__titles.large .nut-tabs__titles-item {
+  font-size: var(--nut-tabs-titles-item-large-font-size, var(--nut-font-size-3, 16px));
+}
+.nut-tabs__titles.normal .nut-tabs__titles-item {
+  font-size: var(--nut-tabs-titles-item-font-size, var(--nut-font-size-2, 14px));
+}
+.nut-tabs__titles.small .nut-tabs__titles-item {
+  font-size: var(--nut-tabs-titles-item-small-font-size, var(--nut-font-size-1, 12px));
+}
+.nut-tabs__titles::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  background: transparent;
+}
+.nut-tabs__titles.smile .nut-tabs__titles-item .nut-tabs__titles-item__smile {
+  display: none;
+}
+.nut-tabs__titles.smile .nut-tabs__titles-item.nut-tabs-active .nut-tabs__titles-item__smile {
+  display: block;
+  width: 36px;
+  height: 10px;
+}
+.nut-tabs__content {
+  box-sizing: border-box;
+  display: flex;
+}
+.nut-tabs .nut-tabs__titles-item .uni {
+  height: 46px;
+  line-height: 46px;
+}
+.nut-tabs .nut-tabs__titles-placeholder {
+  width: auto;
+  min-width: 10px;
+}
+scroll-view ::-webkit-scrollbar {
+  display: none;
+  width: 0 !important;
+  height: 0 !important;
+  background: transparent;
+}
+.nut-sticky {
+  position: -webkit-sticky;
+  position: sticky;
+}
+.nut-theme-dark .nut-cascader .nut-tabs__titles {
+  background: var(--nut-dark-background3, #141414) !important;
+}
+.nut-theme-dark .nut-cascader__bar {
+  color: var(--nut-dark-color, var(--nut-white, #fff));
+  background: var(--nut-dark-background2, #1b1b1b);
+}
+.nut-theme-dark .nut-cascader-item__inner {
+  color: var(--nut-dark-color-gray, var(--nut-text-color, #808080));
+}
+.nut-cascader .nut-tab-pane {
+  padding: 0;
+}
+.nut-cascader .nut-tabs__titles {
+  padding: var(--nut-cascader-tabs-item-padding, 0 10px);
+  background: #fff;
+}
+.nut-cascader-item {
+  width: 100%;
+  font-size: var(--nut-cascader-font-size, var(--nut-font-size-2, 14px));
+  line-height: var(--nut-cascader-line-height, 22px);
+}
+.nut-cascader-item.nut-tabs.horizontal .nut-tabs__titles .nut-tabs__titles-item {
+  flex: initial;
+  padding: var(--nut-cascader-tabs-item-padding, 0 10px);
+  white-space: nowrap;
+}
+.nut-cascader-item__inner {
+  display: flex;
+  align-items: center;
+  padding: var(--nut-cascader-item-padding, 10px 20px);
+  margin: 0;
+  font-size: var(--nut-cascader-item-font-size, var(--nut-font-size-2, 14px));
+  color: var(--nut-cascader-item-color, var(--nut-title-color, #1a1a1a));
+  cursor: pointer;
+}
+.nut-cascader-item__title {
+  flex: 1;
+}
+.nut-cascader-item__icon-check {
+  margin-left: 10px;
+  visibility: hidden;
+}
+.nut-cascader-item__icon-loading {
+  margin-left: 10px;
+}
+.nut-cascader-item.active:not(.disabled) {
+  color: var(--nut-cascader-item-active-color, var(--nut-primary-color, #fa2c19));
+}
+.nut-cascader-item.active .nut-cascader-item__icon-check {
+  color: var(--nut-cascader-item-active-color, var(--nut-primary-color, #fa2c19));
+  visibility: visible;
+}
+.nut-cascader-item.disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.nut-cascader__bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--nut-cascader-bar-padding, 24px 20px 17px);
+  font-size: var(--nut-cascader-bar-font-size, var(--nut-font-size-4, 18px));
+  font-weight: bold;
+  line-height: var(--nut-cascader-bar-line-height, 20px);
+  color: var(--nut-cascader-bar-color, var(--nut-title-color, #1a1a1a));
+  text-align: center;
+}
+.nut-cascader-pane {
+  display: block;
+  width: 100%;
+  height: 342px;
+  padding: 10px 0 0;
+  margin: 0;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.nut-theme-dark .nut-tabs .nut-tabs__titles {
+  background: var(--nut-dark-background3, #141414);
+}
+.nut-theme-dark .nut-tabs .nut-tabs__titles .nut-tabs__titles-item {
+  color: var(--nut-dark-color-gray, var(--nut-text-color, #808080));
+}
+.nut-theme-dark .nut-tabs .nut-tabs__titles .nut-tabs__titles-item.nut-tabs-active {
+  color: var(--nut-dark-color, var(--nut-white, #fff));
+}
+.nut-theme-dark .nut-tabs.vertical .nut-tabs__titles .nut-tabs__titles-item.nut-tabs-active {
+  background-color: var(--nut-dark-background2, #1b1b1b);
+}
+.nut-tabs {
+  display: flex;
+  overflow: hidden;
+}
+.nut-tabs .nut-tabs__titles {
+  display: flex;
+  flex-shrink: 0;
+  white-space: nowrap;
+  -webkit-user-select: none;
+          user-select: none;
+  background: var(--nut-tabs-titles-background-color, var(--nut-help-color, #f5f5f5));
+  border-radius: var(--nut-tabs-titles-border-radius, 0);
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__list {
+  display: flex;
+  flex-shrink: 0;
+  width: 100%;
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__titles-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--nut-tabs-titles-item-font-size, var(--nut-font-size-2, 14px));
+  color: var(--nut-tabs-titles-item-color, var(--nut-title-color, #1a1a1a));
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__titles-item__text {
+  text-align: center;
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__titles-item__text.ellipsis {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__titles-item__smile .nut-icon {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  font-size: 12px;
+  color: var(--nut-tabs-tab-smile-color, var(--nut-primary-color, #fa2c19));
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__titles-item__smile, .nut-tabs .nut-tabs__titles .nut-tabs__titles-item__line {
+  position: absolute;
+  bottom: 15%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  content: "";
+  border-radius: var(--nut-tabs-titles-item-line-border-radius, 0);
+  opacity: var(--nut-tabs-titles-item-line-opacity, 1);
+  transition: width 0.3s ease;
+  transform: translate(-50%, 0);
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__titles-item.nut-tabs-active {
+  font-weight: bold;
+  color: var(--nut-tabs-titles-item-active-color, var(--nut-title-color, #1a1a1a));
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__titles-item.nut-tabs-active .nut-tabs__titles-item__line {
+  width: var(--nut-tabs-horizontal-titles-item-active-line-width, 40px);
+  height: 3px;
+  content: "";
+  background: var(--nut-tabs-horizontal-tab-line-color, linear-gradient(90deg, var(--nut-primary-color, #fa2c19) 0%, rgba(250, 44, 25, 0.15) 100%));
+}
+.nut-tabs .nut-tabs__titles .nut-tabs__titles-item.disabled {
+  color: var(--nut-disable-color, #ccc);
+}
+.nut-tabs .nut-tabs__titles-left {
+  justify-content: flex-start;
+}
+.nut-tabs.horizontal {
+  flex-direction: column;
+}
+.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles,
+.nut-tabs.horizontal > .nut-tabs__titles {
+  flex-direction: row;
+  height: var(--nut-tabs-horizontal-titles-height, 46px);
+}
+.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__list,
+.nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__list {
+  height: 100%;
+}
+.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles.scrollable,
+.nut-tabs.horizontal > .nut-tabs__titles.scrollable {
+  overflow: auto hidden;
+}
+.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item,
+.nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item {
+  flex: 1 0 auto;
+  width: 0;
+  min-width: var(--nut-tabs-horizontal-titles-item-min-width, 50px);
+}
+.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item__smile .nut-icon,
+.nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item__smile .nut-icon {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  font-size: 12px;
+  color: var(--nut-tabs-tab-smile-color, var(--nut-primary-color, #fa2c19));
+}
+.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item-left,
+.nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item-left {
+  flex: 0 0 auto;
+}
+.nut-tabs.vertical {
+  flex-direction: row;
+  width: 100%;
+}
+.nut-tabs.vertical > .nut-tabs__titles {
+  flex-direction: column;
+  width: var(--nut-tabs-vertical-titles-width, 100px);
+  height: auto;
+  padding: 10px 0;
+}
+.nut-tabs.vertical > .nut-tabs__titles .nut-tabs__list {
+  flex-direction: column;
+}
+.nut-tabs.vertical > .nut-tabs__titles.scrollable {
+  height: auto;
+  overflow: hidden auto;
+}
+.nut-tabs.vertical > .nut-tabs__titles.scrollable .nut-tabs__titles-placeholder {
+  height: 22px;
+}
+.nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item {
+  flex: none;
+  width: 100%;
+  min-width: var(--nut-tabs-horizontal-titles-item-min-width, 50px);
+  height: var(--nut-tabs-vertical-titles-item-height, 40px);
+}
+.nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item__line {
+  bottom: none;
+  width: 0;
+  height: 0;
+  transition: height 0.3s ease;
+  transform: translate(0, -50%);
+}
+.nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item.nut-tabs-active {
+  background-color: #fff;
+}
+.nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item.nut-tabs-active .nut-tabs__titles-item__line {
+  left: 10px;
+  width: 3px;
+  height: var(--nut-tabs-vertical-titles-item-active-line-height, 14px);
+  background: var(--nut-tabs-vertical-tab-line-color, linear-gradient(180deg, var(--nut-primary-color, #fa2c19) 0%, rgba(250, 44, 25, 0.15) 100%));
+}
+.nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item.nut-tabs-active .nut-tabs__titles-item__smile {
+  position: absolute;
+  right: -8px;
+  bottom: 2px;
+  left: auto;
+  width: 36px;
+  height: var(--nut-tabs-vertical-titles-item-active-line-height, 14px);
+  transform: rotate(320deg);
+}
+.nut-tabs.vertical .nut-tabs__content {
+  flex: 1;
+  flex-direction: column;
+}
+.nut-tabs.vertical .nut-tabs__content .nut-tab-pane {
+  height: 100%;
+}
+.nut-tabs__titles.large .nut-tabs__titles-item {
+  font-size: var(--nut-tabs-titles-item-large-font-size, var(--nut-font-size-3, 16px));
+}
+.nut-tabs__titles.normal .nut-tabs__titles-item {
+  font-size: var(--nut-tabs-titles-item-font-size, var(--nut-font-size-2, 14px));
+}
+.nut-tabs__titles.small .nut-tabs__titles-item {
+  font-size: var(--nut-tabs-titles-item-small-font-size, var(--nut-font-size-1, 12px));
+}
+.nut-tabs__titles::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  background: transparent;
+}
+.nut-tabs__titles.smile .nut-tabs__titles-item .nut-tabs__titles-item__smile {
+  display: none;
+}
+.nut-tabs__titles.smile .nut-tabs__titles-item.nut-tabs-active .nut-tabs__titles-item__smile {
+  display: block;
+  width: 36px;
+  height: 10px;
+}
+.nut-tabs__content {
+  box-sizing: border-box;
+  display: flex;
+}
+.nut-tabs .nut-tabs__titles-item .uni {
+  height: 46px;
+  line-height: 46px;
+}
+.nut-tabs .nut-tabs__titles-placeholder {
+  width: auto;
+  min-width: 10px;
+}
+scroll-view ::-webkit-scrollbar {
+  display: none;
+  width: 0 !important;
+  height: 0 !important;
+  background: transparent;
+}
+.nut-theme-dark .nut-tab-pane {
+  background: var(--nut-dark-background2, #1b1b1b);
+}
+.nut-tab-pane {
+  box-sizing: border-box;
+  display: block;
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  padding: var(--nut-tab-pane-padding, 24px 20px);
+  overflow: auto;
+  word-break: break-all;
+  background: var(--nut-tab-pane-background, var(--nut-white, #fff));
+}
+.nut-tab-pane.inactive {
+  height: 0;
+  overflow: visible;
+}