{"version":3,"file":"edit-bar.vue2.mjs","sources":["../../../../../packages/components/edit-bar/src/edit-bar.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n  name: 'ElEditBar'\n});\n</script>\n<template>\n  <div :class=\"ns.b()\">\n    <div :class=\"ns.e('tools')\">\n      <span :class=\"ns.e('title')\">{{ title }}</span>\n      <slot name=\"tools\">\n        <span :class=\"ns.e('tools-icon')\">\n          <el-icon @click=\"emit('create')\" :size=\"16\"><Plus /></el-icon>\n        </span>\n      </slot>\n    </div>\n    <el-tree\n      v-if=\"tree\"\n      :data=\"data\"\n      :props=\"{\n        children: childrenKey,\n        value: valueKey,\n        label: labelKey\n      }\"\n      :expand-on-click-node=\"false\"\n      highlight-current\n      :item-size=\"32\"\n      height=\"calc(100% - 48px)\"\n      @current-change=\"onSelect\"\n      ref=\"treeRef\"\n      perf-mode\n    >\n      <template #default=\"{ data, node }\">\n        <div\n          style=\"width: 100%\"\n          :class=\"{\n            [ns.e('tree-item')]: true,\n            [ns.em('item', 'active')]: getChainValue(data, valueKey) === itemId\n          }\"\n        >\n          <slot v-bind=\"data\">\n            <span :class=\"ns.e('item-label')\"> {{ node.label }}</span>\n          </slot>\n\n          <span @click.stop :class=\"ns.e('action')\">\n            <el-icon\n              @click=\"emit('create', data, node)\"\n              :size=\"16\"\n              style=\"margin-right: 4px\"\n            >\n              <Plus />\n            </el-icon>\n            <el-icon\n              @click=\"emit('update', data, node)\"\n              :size=\"16\"\n              style=\"margin-right: 4px\"\n            >\n              <Edit />\n            </el-icon>\n            <el-popconfirm title=\"确定删除吗?\" @confirm=\"onDelete(data)\">\n              <template #reference>\n                <el-icon :size=\"16\"><Delete /></el-icon>\n              </template>\n            </el-popconfirm>\n          </span>\n        </div>\n      </template>\n    </el-tree>\n\n    <el-scrollbar v-else ref=\"listRef\" tag=\"ul\" :class=\"ns.e('list')\">\n      <li\n        v-for=\"item of data\"\n        :key=\"getChainValue(item, valueKey)\"\n        :class=\"{\n          [ns.e('item')]: true,\n          [ns.em('item', 'active')]: getChainValue(item, valueKey) === itemId\n        }\"\n        @click=\"onSelect(item)\"\n        tabindex=\"0\"\n      >\n        <span v-if=\"sortable\" :class=\"ns.e('handle')\"></span>\n        <div :class=\"ns.e('item-content')\">\n          <slot v-bind=\"item\">\n            <span :class=\"ns.e('item-label')\">\n              {{ getChainValue(item, labelKey) }}\n            </span>\n          </slot>\n        </div>\n\n        <span @click.stop :class=\"ns.e('action')\">\n          <el-icon\n            @click=\"emit('update', item)\"\n            :size=\"16\"\n            style=\"margin-right: 4px\"\n          >\n            <Edit />\n          </el-icon>\n          <el-popconfirm title=\"确定删除吗?\" @confirm=\"onDelete(item)\">\n            <template #reference>\n              <el-icon :size=\"16\"><Delete /></el-icon>\n            </template>\n          </el-popconfirm>\n        </span>\n      </li>\n    </el-scrollbar>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport { shallowRef, onMounted, watch, onBeforeUnmount } from 'vue'\nimport { useNamespace } from '@element-ultra/hooks'\nimport ElScrollbar from '@element-ultra/components/scrollbar'\nimport ElIcon from '@element-ultra/components/icon'\nimport ElPopconfirm from '@element-ultra/components/popconfirm'\nimport ElTree, { type TreeNode } from '@element-ultra/components/tree'\nimport { editBarProps } from './edit-bar'\nimport Sortable from 'sortablejs'\nimport { Edit, Delete, Plus } from 'icon-ultra'\nimport { getChainValue } from '@element-ultra/utils'\nimport { nextTick } from 'vue'\n\n\n\nconst ns = useNamespace('edit-bar')\n\nconst props = defineProps(editBarProps)\n\nconst emit = defineEmits([\"create\", \"update\", \"select\", \"update:modelValue\", \"delete\", \"sorted\"])\n\nlet itemId = shallowRef<string | number | undefined>(props.modelValue)\n\nconst treeRef = shallowRef<InstanceType<typeof ElTree>>()\n\nwatch(\n  () => props.modelValue,\n  v => {\n    itemId.value !== v && (itemId.value = v)\n  }\n)\n\nwatch(itemId, v => {\n  nextTick(() => {\n    treeRef.value?.setCurrentKey(v)\n  })\n}, { immediate: true })\n\n// 排序相关\nconst listRef = shallowRef<InstanceType<typeof ElScrollbar>>()\n\nlet sortInstance: Sortable\n\nconst getSortInstance = () => {\n  if (props.tree) return\n\n  if (!listRef.value?.viewRef) return\n  const { viewRef } = listRef.value\n\n  sortInstance = new Sortable(viewRef, {\n    animation: 150,\n    ghostClass: 'el-edit-bar__ghost',\n    handle: '.el-edit-bar__handle',\n\n    onSort(e) {\n      const { oldIndex, newIndex } = e\n      const { data } = props\n      if (oldIndex === undefined || newIndex === undefined || !data) return\n      data.splice(newIndex, 0, data.splice(oldIndex, 1)[0])\n      emit('sorted', data, oldIndex, newIndex)\n    }\n  })\n}\n\nonMounted(() => {\n  props.sortable && getSortInstance()\n})\n\nonBeforeUnmount(() => {\n  sortInstance?.destroy()\n})\n\nwatch(\n  () => props.sortable,\n  v => {\n    if (v) {\n      listRef.value && getSortInstance()\n    } else {\n      sortInstance?.destroy()\n    }\n  }\n)\n\nconst onSelect = (item: any) => {\n  const value = item ? getChainValue(item, props.valueKey) : undefined\n\n  if (!item) {\n    itemId.value = undefined\n  } else if (itemId.value === value) {\n    itemId.value = undefined\n  } else {\n    itemId.value = value\n  }\n\n  emit('select', itemId.value, item)\n  emit('update:modelValue', itemId.value, item)\n}\n\nconst onDelete = (item: any) => {\n  emit('delete', getChainValue(item, props.valueKey), item)\n}\n\nwatch(\n  () => props.data,\n  data => {\n    if (data && data.length && props.defaultSelect && itemId.value === null) {\n      onSelect(data[0])\n    }\n  },\n  { immediate: true }\n)\n</script>\n"],"names":["__MACROS_defineComponent"],"mappings":"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"}