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

A high quality UI components Library with Vue.js

{"version":3,"file":"item.mjs","sources":["../../../../../src/components/ivue-tabs/item.vue"],"sourcesContent":["<template>\r\n  <transition :name=\"computedTransition\">\r\n    <div class=\"ivue-tabs-content\" v-show=\"isActive\" ref=\"content\">\r\n      <slot></slot>\r\n    </div>\r\n  </transition>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n  defineComponent,\r\n  onMounted,\r\n  onBeforeUnmount,\r\n  inject,\r\n  getCurrentInstance,\r\n  computed,\r\n  ref,\r\n} from 'vue';\r\n\r\n// type\r\nimport { TabsContextKey } from './types/tabs';\r\nimport type { Props } from './types/item';\r\n\r\nexport default defineComponent({\r\n  name: 'ivue-tab-item',\r\n  props: {\r\n    /**\r\n     * 前进transition\r\n     *\r\n     * @type {String}\r\n     */\r\n    transition: {\r\n      type: String,\r\n      default: 'tab-transition',\r\n    },\r\n    /**\r\n     * 反向transition\r\n     *\r\n     * @type {String}\r\n     */\r\n    reverseTransition: {\r\n      type: String,\r\n      default: 'tab-reverse-transition',\r\n    },\r\n  },\r\n  setup(props: Props) {\r\n    // vm\r\n    const { proxy, uid } = getCurrentInstance();\r\n\r\n    // inject\r\n    const tabsGroup = inject(TabsContextKey);\r\n\r\n    // data\r\n    const content = ref<HTMLElement>(null);\r\n\r\n    // 是否激活\r\n    const isActive = ref<boolean>(false);\r\n    // 方向\r\n    const reverse = ref<boolean>(false);\r\n    // 当前 name\r\n    const name = ref<number>(uid);\r\n\r\n    // computed\r\n\r\n    const computedTransition = computed(() => {\r\n      return reverse.value ? props.reverseTransition : props.transition;\r\n    });\r\n\r\n    // methods\r\n\r\n    // 切换\r\n    const handleToggle = (\r\n      _isActive: boolean,\r\n      _reverse: boolean,\r\n      showTransition: boolean\r\n    ) => {\r\n      reverse.value = _reverse;\r\n\r\n      isActive.value = _isActive;\r\n\r\n      if (content.value) {\r\n        content.value.style.transition = !showTransition ? 'none' : null;\r\n      }\r\n    };\r\n\r\n    // onMounted\r\n    onMounted(() => {\r\n      // 插入dom\r\n      tabsGroup.data.tabsItem.push(proxy);\r\n    });\r\n\r\n    // onBeforeUnmount\r\n    onBeforeUnmount(() => {\r\n      tabsGroup.unregisterItems(name.value);\r\n    });\r\n\r\n    return {\r\n      // dom\r\n      content,\r\n\r\n      // data\r\n      isActive,\r\n\r\n      // computed\r\n      computedTransition,\r\n\r\n      // methods\r\n      handleToggle,\r\n    };\r\n  },\r\n});\r\n</script>\r\n"],"names":["_openBlock","_createBlock","_Transition","_withCtx","_withDirectives","_createElementVNode"],"mappings":";;;;MAEwD,UAAU,GAAA;AAAA,EAAA,KAAA,EAAA,mBAAA;AAAA;;AAD/C,SAAA,YAAE,IAAkB,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,OAAA,QAAA,EAAA;EAArC,OAAAA,SAAA,EAIa,EAAAC,WAAA,CAAAC,UAAA,EAAA;AAAA,IAAA,MAAA,IAAA,CAAA,kBAAA;AAAA;;aAFTC,QAAa,MAAA;AAAA,MAAAC,cAAA,CAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,mBADwB,IAAQ,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,OAAA,EAAA,GAAA,CAAA,EAAA;AAAA;;;;;;;;;;"}