vexip-ui/lib/components/layout/layout-aside.cjs.map

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

{"version":3,"file":"layout-aside.cjs","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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"}