vexip-ui/es/components/layout/layout-aside.mjs.map

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

{"version":3,"file":"layout-aside.mjs","sources":["../../../components/layout/layout-aside.tsx"],"sourcesContent":["import { Icon } from '@/components/icon'\nimport { Menu } from '@/components/menu'\nimport { NativeScroll } from '@/components/native-scroll'\n\nimport {\n  computed,\n  defineComponent,\n  reactive,\n  ref,\n  renderSlot,\n  shallowReadonly,\n  toRef,\n  watch,\n} from 'vue'\n\nimport { emitEvent, useIcons, useNameHelper, useProps } from '@vexip-ui/config'\nimport { layoutAsideProps } from './props'\nimport { useLayoutState, useMediaQuery, useUpdateCounter } from './helper'\n\nimport type { MenuExposed } from '@/components/menu'\n\nexport default defineComponent({\n  name: 'LayoutAside',\n  props: layoutAsideProps,\n  emits: ['update:reduced', 'update:expanded'],\n  setup(_props, { slots, emit, expose }) {\n    const props = useProps('layoutAside', _props, {\n      tag: 'aside',\n      expanded: false,\n      reduced: false,\n      menus: {\n        default: () => [],\n        static: true,\n      },\n      menuProps: null,\n      logo: '',\n      signName: '',\n      fixed: 'lg',\n      signType: 'aside',\n    })\n\n    const nh = useNameHelper('layout')\n    const icons = useIcons()\n\n    const layoutState = useLayoutState()\n    const currentReduced = ref(props.reduced)\n    const currentExpanded = ref(props.expanded)\n    const scrollHeight = ref('100%')\n\n    const matched = useMediaQuery(toRef(props, 'fixed'))\n    const counter = useUpdateCounter()\n\n    const top = ref<HTMLElement>()\n    const bottom = ref<HTMLElement>()\n    const menu = ref<MenuExposed>()\n\n    const className = computed(() => {\n      return [\n        nh.be('aside'),\n        {\n          [nh.bs('vars')]: !layoutState.isLayout,\n          [nh.bem('aside', 'inherit')]: layoutState.isLayout || props.inherit,\n          [nh.bem('aside', 'fixed')]: matched.value,\n          [nh.bem('aside', 'expanded')]: currentExpanded.value,\n          [nh.bem('aside', 'reduced')]: currentReduced.value,\n          [nh.bem('aside', 'no-sign')]: props.signType !== 'aside',\n        },\n        layoutState.classes.aside,\n      ]\n    })\n    const hasTop = computed(() => {\n      return !!(props.logo || props.signName || slots.top)\n    })\n    const hasMenu = computed(() => {\n      return !!(props.menus?.length || props.menuProps?.router)\n    })\n\n    const slotParams = shallowReadonly(\n      reactive({\n        expanded: currentExpanded,\n        reduced: currentReduced,\n        toggleExpanded,\n        toggleReduced,\n      }),\n    )\n\n    expose({ menu, toggleExpanded, toggleReduced, expandMenuByLabel })\n\n    watch(\n      () => props.reduced,\n      value => {\n        currentReduced.value = value\n      },\n    )\n    watch(\n      () => props.expanded,\n      value => {\n        currentExpanded.value = value\n      },\n    )\n    watch(\n      matched,\n      value => {\n        layoutState.useExpand = !value\n        value && toggleExpanded(false)\n      },\n      { immediate: true },\n    )\n    watch(counter, () => computeScrollHeight)\n\n    function computeScrollHeight() {\n      let topHeight = 0\n      let bottomHeight = 0\n\n      if (top.value) {\n        topHeight = top.value.offsetHeight\n      }\n\n      if (bottom.value) {\n        bottomHeight = bottom.value.offsetHeight\n      }\n\n      if (topHeight || bottomHeight) {\n        scrollHeight.value = `calc(100% - ${topHeight + bottomHeight}px)`\n      } else {\n        scrollHeight.value = '100%'\n      }\n    }\n\n    function toggleExpanded(expanded = !currentExpanded.value) {\n      currentExpanded.value = expanded\n\n      emit('update:expanded', expanded)\n      emitEvent(props.onExpandedChange, expanded)\n    }\n\n    function toggleReduced(reduced = !currentReduced.value) {\n      currentReduced.value = reduced\n\n      emit('update:reduced', reduced)\n      emitEvent(props.onReducedChange, reduced)\n    }\n\n    function handleSignClick(event: MouseEvent) {\n      emitEvent(props.onSignClick, event)\n    }\n\n    function handleMenuSelect(label: string, meta: Record<string, any>) {\n      emitEvent(props.onMenuSelect, label, meta)\n    }\n\n    function expandMenuByLabel(label: string) {\n      menu.value?.expandItemByLabel(label)\n    }\n\n    return () => {\n      const CustomTag = (props.tag || 'aside') as any\n\n      return (\n        <CustomTag class={className.value}>\n          {hasTop.value && (\n            <div ref={top} class={[nh.be('aside-top'), layoutState.classes.asideTop]}>\n              {slots.top ? (\n                renderSlot(slots, 'top', slotParams)\n              ) : (\n                <div class={nh.be('sign')} onClick={handleSignClick}>\n                  {props.logo && (\n                    <div class={nh.be('logo')}>\n                      <img src={props.logo} alt={'Logo'} />\n                    </div>\n                  )}\n                  {props.signName && <span class={nh.be('sign-name')}>{props.signName}</span>}\n                </div>\n              )}\n            </div>\n          )}\n          <NativeScroll\n            class={[nh.be('aside-main'), layoutState.classes.main]}\n            use-y-bar\n            observe-deep\n            height={scrollHeight.value}\n          >\n            {slots.default ? (\n              renderSlot(slots, 'default', slotParams)\n            ) : hasMenu.value ? (\n              <Menu\n                ref={menu}\n                {...(props.menuProps || {})}\n                transfer\n                options={props.menus}\n                reduced={currentReduced.value}\n                onSelect={handleMenuSelect}\n              ></Menu>\n            ) : null}\n          </NativeScroll>\n          <div ref={bottom} class={[nh.be('aside-bottom'), layoutState.classes.asideBottom]}>\n            {slots.bottom ? (\n              renderSlot(slots, 'bottom', slotParams)\n            ) : (\n              <div class={nh.be('reduce-handler')} onClick={() => toggleReduced()}>\n                {currentReduced.value ? (\n                  <Icon {...icons.value.indent}></Icon>\n                ) : (\n                  <Icon {...icons.value.outdent}></Icon>\n                )}\n              </div>\n            )}\n          </div>\n          <div\n            class={[nh.be('expand-handler'), layoutState.classes.expandHandler]}\n            onClick={() => toggleExpanded()}\n          >\n            {slots.expand ? (\n              renderSlot(slots, 'expand', slotParams)\n            ) : (\n              <Icon {...icons.value.angleRight}></Icon>\n            )}\n          </div>\n        </CustomTag>\n      )\n    }\n  },\n})\n"],"names":["defineComponent","name","props","layoutAsideProps","emits","setup","_props","slots","emit","expose","useProps","tag","expanded","reduced","menus","default","static","menuProps","logo","signName","fixed","signType","nh","useNameHelper","icons","useIcons","layoutState","useLayoutState","currentReduced","ref","currentExpanded","scrollHeight","matched","useMediaQuery","toRef","counter","useUpdateCounter","top","bottom","menu","className","computed","be","bs","isLayout","bem","inherit","value","classes","aside","hasTop","hasMenu","length","router","slotParams","shallowReadonly","reactive","toggleExpanded","toggleReduced","expandMenuByLabel","watch","useExpand","immediate","computeScrollHeight","topHeight","bottomHeight","offsetHeight","emitEvent","onExpandedChange","onReducedChange","handleSignClick","event","onSignClick","handleMenuSelect","label","meta","onMenuSelect","expandItemByLabel","CustomTag","_createVNode","asideTop","renderSlot","NativeScroll","main","Menu","_mergeProps","asideBottom","onClick","Icon","indent","outdent","expandHandler","expand","angleRight"],"mappings":"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"}