{"version":3,"file":"menuItem.mjs","sources":["../../../../../../packages/components/contextmenu/src/menuItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport LtDivider from '@lit-element/components/divider'\nimport { LtMenuItem, LtSubMenu } from '@lit-element/components/menu'\nimport { LtIcon } from '@lit-element/components/icon'\nimport type { PropType } from 'vue'\n\ndefineOptions({ name: 'LtContextmenuItem' })\n\n// type listItem = {\n//   children?: any[]\n//   color?: string\n//   disabled?: boolean\n//   divided?: boolean\n//   iconColor?: string\n//   key?: string\n//   label?:string\n//   shortcut?:string\n// }\n\ndefineProps({\n  list: Array as PropType<any[]>,\n  itemComp: Object,\n})\n\nfunction titleStyle(list?: any[]) {\n  const hasIcon = list?.find((a: any) => a?.icon)\n  return {\n    paddingLeft: hasIcon ? '28px' : '10px',\n  }\n}\n</script>\n\n<template>\n  <template v-for=\"(item, i) in list || []\">\n    <lt-sub-menu\n      v-if=\"item?.children?.length\"\n      :key=\"'sub_' + i\"\n      :index=\"String(item?.key) || item?.label\"\n      :disabled=\"item.disabled\"\n      :teleported=\"false\"\n    >\n      <template #title>\n        <div\n          :style=\"titleStyle(list)\"\n          style=\"\n            width: 100%;\n            display: flex;\n            flex-wrap: nowrap;\n            align-items: center;\n            position: relative;\n            justify-content: space-between;\n            white-space: nowrap;\n          \"\n        >\n          <LtIcon\n            v-if=\"item.icon\"\n            :size=\"16\"\n            style=\"position: absolute; left: 2px\"\n          >\n            <component :is=\"item.icon\" :style=\"{ color: item.iconColor }\" />\n          </LtIcon>\n          <div style=\"flex: 1\" :style=\"{ color: item.color }\">\n            {{ item.label || item.key }}\n          </div>\n\n          <div v-if=\"item.shortcut\" style=\"text-align: right; color: #adb5bd\">\n            {{ item.shortcut }}\n          </div>\n        </div>\n      </template>\n      <itemComp :list=\"item.children\" :item-comp=\"itemComp\" />\n    </lt-sub-menu>\n\n    <lt-menu-item\n      v-else-if=\"item\"\n      :key=\"i\"\n      :index=\"String(item.key) || item.label\"\n      :disabled=\"item.disabled\"\n    >\n      <div\n        :style=\"titleStyle(list)\"\n        style=\"\n          width: 100%;\n          display: flex;\n          flex-wrap: nowrap;\n          align-items: center;\n          position: relative;\n          justify-content: space-between;\n          white-space: nowrap;\n        \"\n      >\n        <LtIcon\n          v-if=\"item.icon\"\n          :size=\"16\"\n          style=\"position: absolute; left: 2px\"\n        >\n          <component :is=\"item.icon\" :style=\"{ color: item.iconColor }\" />\n        </LtIcon>\n        <div style=\"flex: 1\" :style=\"{ color: item.color }\">\n          {{ item.label || item.key }}\n        </div>\n\n        <div v-if=\"item.shortcut\" style=\"text-align: right; color: #adb5bd\">\n          {{ item.shortcut }}\n        </div>\n      </div>\n    </lt-menu-item>\n\n    <lt-divider\n      v-if=\"item?.divided\"\n      :key=\"'divider_' + i\"\n      style=\"margin: 5px 0\"\n    />\n  </template>\n</template>\n"],"names":[],"mappings":";;;;;;mCAMc,CAAA,EAAE,IAAM,EAAA,mBAAA,EAAoB,CAAA,CAAA;;;;;;;;AAkB1C,IAAA,SAAS,WAAW,IAAc,EAAA;AAChC,MAAA,MAAM,UAAU,IAAM,IAAA,IAAM,GAAA,MAAc,GAAI,IAAA,CAAA,IAAA,CAAA,CAAA,CAAA,KAAA,CAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,CAAA,CAAA,IAAA,CAAA,CAAA;AAC9C,MAAO,OAAA;AAAA,QACL,WAAA,EAAa,UAAU,MAAS,GAAA,MAAA;AAAA,OAClC,CAAA;AAAA,KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}