ivue-material-plus/dist/unplugin-vue-components/es/components/ivue-tabs/tab.mjs.map

A high quality UI components Library with Vue.js

{"version":3,"file":"tab.mjs","sources":["../../../../../src/components/ivue-tabs/tab.vue"],"sourcesContent":["<template>\r\n  <div\r\n    :class=\"wrapClasses\"\r\n    v-ripple=\"computedRipple\"\r\n    ref=\"tab\"\r\n    @click=\"handleChange\"\r\n  >\r\n    <slot></slot>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n  defineComponent,\r\n  computed,\r\n  inject,\r\n  onMounted,\r\n  onBeforeUnmount,\r\n  getCurrentInstance,\r\n  ref,\r\n} from 'vue';\r\n\r\nimport ripple from '../../utils/directives/ripple';\r\n\r\n// type\r\nimport { Props } from './types/tab';\r\nimport { TabsContextKey } from './types/tabs';\r\n\r\nconst prefixCls = 'ivue-tabs-tab';\r\n\r\nexport default defineComponent({\r\n  name: 'ivue-tab',\r\n  directives: {\r\n    ripple,\r\n  },\r\n  props: {\r\n    /**\r\n     * 是否禁用当前项\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    disabled: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 是否禁用涟漪效果\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    rippleDisabled: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 是否居中涟漪效果\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    rippleCentered: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * name\r\n     *\r\n     * @type {String}\r\n     */\r\n    name: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n  },\r\n  setup(props: Props) {\r\n    // inject\r\n    const tabsGroup = inject(TabsContextKey);\r\n\r\n    // vm\r\n    const { proxy, uid } = getCurrentInstance();\r\n\r\n    // 当前 name\r\n    const tabName = ref<string | number>(props.name || uid);\r\n\r\n    // computed\r\n    const wrapClasses = computed(() => {\r\n      return [\r\n        {\r\n          [prefixCls]: true,\r\n          [`${prefixCls}-disabled`]: props.disabled,\r\n          [`${prefixCls}-active`]: isActive.value,\r\n        },\r\n      ];\r\n    });\r\n\r\n    // 涟漪效果\r\n    const computedRipple = computed(() => {\r\n      if (props.rippleCentered) {\r\n        return {\r\n          center: true,\r\n        };\r\n      } else if (props.rippleDisabled) {\r\n        return false;\r\n      }\r\n\r\n      return true;\r\n    });\r\n\r\n    // 激活\r\n    const isActive = computed(() => {\r\n      if (tabsGroup.props.modelValue === tabName.value) {\r\n        return true;\r\n      }\r\n\r\n      return false;\r\n    });\r\n\r\n    // methods\r\n\r\n    // 点击当前项\r\n    const handleChange = () => {\r\n      tabsGroup.tabNavClick(proxy);\r\n    };\r\n\r\n    // onMounted\r\n    onMounted(() => {\r\n      // 插入dom\r\n      tabsGroup.data.tabs.push(proxy);\r\n    });\r\n\r\n    // onBeforeUnmount\r\n    onBeforeUnmount(() => {\r\n      tabsGroup.unregister(tabName.value);\r\n    });\r\n\r\n    return {\r\n      prefixCls,\r\n\r\n      // data\r\n      tabName,\r\n\r\n      // computed\r\n      wrapClasses,\r\n      computedRipple,\r\n      isActive,\r\n\r\n      // methods\r\n      handleChange,\r\n    };\r\n  },\r\n});\r\n</script>\r\n"],"names":["_resolveDirective","_withDirectives","_openBlock","_createElementBlock","_normalizeClass","_renderSlot"],"mappings":";;;;;AACE,EAAA,MAAA,iBAAA,GAAAA,iBAAA,QAAA,CAAA,CAAA;SAGMC,cAAK,EAAAC,SAAA,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA;AAAA,IACR,KAAA,EAAKC,cAAA,CAAA,IAAA,CAAA,WAAA,CAAA;AAAA,IAAA,GAAA,EAAA,KAAA;AAAA,IAEN,OAAa,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,YAAA,IAAA,IAAA,CAAA,YAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,GAAA,EAAA;AAAA,IAJHC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,GAAA,EAAA,CAAA,CAAA,GAAA;AAAA;;;;;;;"}