@datametria/vue-components 2.3.1 → 2.4.0

package/src/components/DatametriaTree.vue

@@ -1,124 +1,128 @@
-<template>
-  <div class="datametria-tree" role="tree">
-    <DatametriaTreeNode
-      v-for="node in data"
-      :key="getNodeKey(node)"
-      :node="node"
-      :node-key="nodeKey"
-      :checkable="checkable"
-      :default-expand-all="defaultExpandAll"
-      :expanded-keys="expandedKeysSet"
-      :checked-keys="checkedKeysSet"
-      @toggle="handleToggle"
-      @check="handleCheck"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import DatametriaTreeNode from './DatametriaTreeNode.vue'
-
-export interface TreeNode {
-  [key: string]: any
-  children?: TreeNode[]
-}
-
-interface Props {
-  data: TreeNode[]
-  nodeKey?: string
-  defaultExpandAll?: boolean
-  checkable?: boolean
-  defaultExpandedKeys?: (string | number)[]
-  defaultCheckedKeys?: (string | number)[]
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  nodeKey: 'id',
-  defaultExpandAll: false,
-  checkable: false,
-  defaultExpandedKeys: () => [],
-  defaultCheckedKeys: () => []
-})
-
-const emit = defineEmits<{
-  nodeExpand: [node: TreeNode]
-  nodeCollapse: [node: TreeNode]
-  check: [checkedKeys: (string | number)[], node: TreeNode]
-}>()
-
-const getAllKeys = (nodes: TreeNode[]): (string | number)[] => {
-  const keys: (string | number)[] = []
-  nodes.forEach(node => {
-    keys.push(node[props.nodeKey])
-    if (node.children) {
-      keys.push(...getAllKeys(node.children))
-    }
-  })
-  return keys
-}
-
-const initialKeys = props.defaultExpandAll
-  ? getAllKeys(props.data)
-  : props.defaultExpandedKeys
-
-const expandedKeys = ref<Set<string | number>>(new Set(initialKeys))
-const checkedKeys = ref<Set<string | number>>(new Set(props.defaultCheckedKeys))
-
-const expandedKeysSet = computed(() => expandedKeys.value)
-const checkedKeysSet = computed(() => checkedKeys.value)
-
-const getNodeKey = (node: TreeNode): string | number => {
-  return node[props.nodeKey]
-}
-
-const handleToggle = (node: TreeNode) => {
-  const key = getNodeKey(node)
-  
-  if (expandedKeys.value.has(key)) {
-    expandedKeys.value.delete(key)
-    emit('nodeCollapse', node)
-  } else {
-    expandedKeys.value.add(key)
-    emit('nodeExpand', node)
+<template>
+  <div class="datametria-tree" role="tree">
+    <DatametriaTreeNode
+      v-for="node in data"
+      :key="getNodeKey(node)"
+      :node="node"
+      :node-key="nodeKey"
+      :checkable="checkable"
+      :default-expand-all="defaultExpandAll"
+      :expanded-keys="expandedKeysSet"
+      :checked-keys="checkedKeysSet"
+      @toggle="handleToggle"
+      @check="handleCheck"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import DatametriaTreeNode from './DatametriaTreeNode.vue'
+
+export interface TreeNode {
+  [key: string]: any
+  children?: TreeNode[]
+}
+
+interface Props {
+  data: TreeNode[]
+  nodeKey?: string
+  defaultExpandAll?: boolean
+  checkable?: boolean
+  defaultExpandedKeys?: (string | number)[]
+  defaultCheckedKeys?: (string | number)[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  nodeKey: 'id',
+  defaultExpandAll: false,
+  checkable: false,
+  defaultExpandedKeys: () => [],
+  defaultCheckedKeys: () => []
+})
+
+const emit = defineEmits<{
+  nodeExpand: [node: TreeNode]
+  nodeCollapse: [node: TreeNode]
+  check: [checkedKeys: (string | number)[], node: TreeNode]
+}>()
+
+const getAllKeys = (nodes: TreeNode[]): (string | number)[] => {
+  const keys: (string | number)[] = []
+  nodes.forEach(node => {
+    keys.push(node[props.nodeKey])
+    if (node.children) {
+      keys.push(...getAllKeys(node.children))
+    }
+  })
+  return keys
+}
+
+const initialKeys = props.defaultExpandAll
+  ? getAllKeys(props.data)
+  : props.defaultExpandedKeys
+
+const expandedKeys = ref<Set<string | number>>(new Set(initialKeys))
+const checkedKeys = ref<Set<string | number>>(new Set(props.defaultCheckedKeys))
+
+const expandedKeysSet = computed(() => expandedKeys.value)
+const checkedKeysSet = computed(() => checkedKeys.value)
+
+const getNodeKey = (node: TreeNode): string | number => {
+  return node[props.nodeKey]
+}
+
+const handleToggle = (node: TreeNode) => {
+  const key = getNodeKey(node)
+  
+  if (expandedKeys.value.has(key)) {
+    expandedKeys.value.delete(key)
+    emit('nodeCollapse', node)
+  } else {
+    expandedKeys.value.add(key)
+    emit('nodeExpand', node)
+  }
+}
+
+const handleCheck = (node: TreeNode, checked: boolean) => {
+  const key = getNodeKey(node)
+  
+  if (checked) {
+    checkedKeys.value.add(key)
+  } else {
+    checkedKeys.value.delete(key)
+  }
+  
+  emit('check', Array.from(checkedKeys.value), node)
+}
+
+const expandAll = () => {
+  expandedKeys.value = new Set(getAllKeys(props.data))
+}
+
+const collapseAll = () => {
+  expandedKeys.value.clear()
+}
+
+defineExpose({
+  expandAll,
+  collapseAll
+})
+</script>
+
+<style scoped>
+.datametria-tree {
+  font-size: var(--dm-font-size-base, 14px);
+  color: var(--dm-color-text, #333);
+}
+
+@media (prefers-color-scheme: dark) {
+  .datametria-tree {
+    color: var(--dm-color-text-dark, #e0e0e0);
   }
-}
-
-const handleCheck = (node: TreeNode, checked: boolean) => {
-  const key = getNodeKey(node)
-  
-  if (checked) {
-    checkedKeys.value.add(key)
-  } else {
-    checkedKeys.value.delete(key)
-  }
-  
-  emit('check', Array.from(checkedKeys.value), node)
-}
-
-const expandAll = () => {
-  expandedKeys.value = new Set(getAllKeys(props.data))
-}
 
-const collapseAll = () => {
-  expandedKeys.value.clear()
-}
-
-defineExpose({
-  expandAll,
-  collapseAll
-})
-</script>
-
-<style scoped>
-.datametria-tree {
-  font-size: var(--dm-font-size-base, 14px);
-  color: var(--dm-color-text, #333);
-}
-
-@media (prefers-color-scheme: dark) {
-  .datametria-tree {
-    color: var(--dm-color-text-dark, #e0e0e0);
-  }
-}
-</style>
+[data-theme="dark"] .datametria-tree {
+color: var(--dm-color-text-dark, #e0e0e0);
+}
+}
+</style>

package/src/components/DatametriaTreeNode.vue

@@ -1,174 +1,178 @@
-<template>
-  <div class="datametria-tree-node" role="treeitem" :aria-expanded="isExpanded">
-    <div
-      class="datametria-tree-node__content"
-      :class="{ 'is-leaf': isLeaf }"
-      @click="handleClick"
-    >
-      <span
-        v-if="!isLeaf"
-        class="datametria-tree-node__expand"
-        @click.stop="handleToggle"
-      >
-        <span class="datametria-tree-node__icon">{{ isExpanded ? '▼' : '▶' }}</span>
-      </span>
-      <span v-else class="datametria-tree-node__expand datametria-tree-node__expand--leaf"></span>
-
-      <input
-        v-if="checkable"
-        type="checkbox"
-        class="datametria-tree-node__checkbox"
-        :checked="isChecked"
-        @change="handleCheckChange"
-        @click.stop
-      />
-
-      <span class="datametria-tree-node__label">
-        {{ node.label || node.name || node[nodeKey] }}
-      </span>
-    </div>
-
-    <div v-if="hasChildren && isExpanded" class="datametria-tree-node__children">
-      <DatametriaTreeNode
-        v-for="child in node.children"
-        :key="getChildKey(child)"
-        :node="child"
-        :node-key="nodeKey"
-        :checkable="checkable"
-        :default-expand-all="defaultExpandAll"
-        :expanded-keys="expandedKeys"
-        :checked-keys="checkedKeys"
-        @toggle="$emit('toggle', $event)"
-        @check="(node, checked) => $emit('check', node, checked)"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { TreeNode } from './DatametriaTree.vue'
-
-interface Props {
-  node: TreeNode
-  nodeKey: string
-  checkable: boolean
-  defaultExpandAll: boolean
-  expandedKeys: Set<string | number>
-  checkedKeys: Set<string | number>
-}
-
-const props = defineProps<Props>()
-
-const emit = defineEmits<{
-  toggle: [node: TreeNode]
-  check: [node: TreeNode, checked: boolean]
-}>()
-
-const nodeKeyValue = computed(() => props.node[props.nodeKey])
-
-const hasChildren = computed(() => {
-  return props.node.children && props.node.children.length > 0
-})
-
-const isLeaf = computed(() => !hasChildren.value)
-
-const isExpanded = computed(() => {
-  return props.expandedKeys.has(nodeKeyValue.value)
-})
-
-const isChecked = computed(() => {
-  return props.checkedKeys.has(nodeKeyValue.value)
-})
-
-const getChildKey = (child: TreeNode): string | number => {
-  return child[props.nodeKey]
-}
-
-const handleToggle = () => {
-  emit('toggle', props.node)
-}
-
-const handleClick = () => {
-  if (!isLeaf.value) {
-    handleToggle()
+<template>
+  <div class="datametria-tree-node" role="treeitem" :aria-expanded="isExpanded">
+    <div
+      class="datametria-tree-node__content"
+      :class="{ 'is-leaf': isLeaf }"
+      @click="handleClick"
+    >
+      <span
+        v-if="!isLeaf"
+        class="datametria-tree-node__expand"
+        @click.stop="handleToggle"
+      >
+        <span class="datametria-tree-node__icon">{{ isExpanded ? '▼' : '▶' }}</span>
+      </span>
+      <span v-else class="datametria-tree-node__expand datametria-tree-node__expand--leaf"></span>
+
+      <input
+        v-if="checkable"
+        type="checkbox"
+        class="datametria-tree-node__checkbox"
+        :checked="isChecked"
+        @change="handleCheckChange"
+        @click.stop
+      />
+
+      <span class="datametria-tree-node__label">
+        {{ node.label || node.name || node[nodeKey] }}
+      </span>
+    </div>
+
+    <div v-if="hasChildren && isExpanded" class="datametria-tree-node__children">
+      <DatametriaTreeNode
+        v-for="child in node.children"
+        :key="getChildKey(child)"
+        :node="child"
+        :node-key="nodeKey"
+        :checkable="checkable"
+        :default-expand-all="defaultExpandAll"
+        :expanded-keys="expandedKeys"
+        :checked-keys="checkedKeys"
+        @toggle="$emit('toggle', $event)"
+        @check="(node, checked) => $emit('check', node, checked)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { TreeNode } from './DatametriaTree.vue'
+
+interface Props {
+  node: TreeNode
+  nodeKey: string
+  checkable: boolean
+  defaultExpandAll: boolean
+  expandedKeys: Set<string | number>
+  checkedKeys: Set<string | number>
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  toggle: [node: TreeNode]
+  check: [node: TreeNode, checked: boolean]
+}>()
+
+const nodeKeyValue = computed(() => props.node[props.nodeKey])
+
+const hasChildren = computed(() => {
+  return props.node.children && props.node.children.length > 0
+})
+
+const isLeaf = computed(() => !hasChildren.value)
+
+const isExpanded = computed(() => {
+  return props.expandedKeys.has(nodeKeyValue.value)
+})
+
+const isChecked = computed(() => {
+  return props.checkedKeys.has(nodeKeyValue.value)
+})
+
+const getChildKey = (child: TreeNode): string | number => {
+  return child[props.nodeKey]
+}
+
+const handleToggle = () => {
+  emit('toggle', props.node)
+}
+
+const handleClick = () => {
+  if (!isLeaf.value) {
+    handleToggle()
+  }
+}
+
+const handleCheckChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  emit('check', props.node, target.checked)
+}
+</script>
+
+<style scoped>
+.datametria-tree-node {
+  user-select: none;
+}
+
+.datametria-tree-node__content {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.datametria-tree-node__content:hover {
+  background-color: var(--dm-color-background-hover, #f5f5f5);
+}
+
+.datametria-tree-node__content.is-leaf {
+  padding-left: 24px;
+}
+
+.datametria-tree-node__expand {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-right: 4px;
+  cursor: pointer;
+}
+
+.datametria-tree-node__expand--leaf {
+  cursor: default;
+}
+
+.datametria-tree-node__icon {
+  font-size: 10px;
+  color: var(--dm-color-text-secondary, #666);
+  transition: transform 0.2s;
+}
+
+.datametria-tree-node__checkbox {
+  margin-right: 8px;
+  cursor: pointer;
+}
+
+.datametria-tree-node__label {
+  flex: 1;
+  font-size: var(--dm-font-size-base, 14px);
+  color: var(--dm-color-text, #333);
+}
+
+.datametria-tree-node__children {
+  padding-left: 20px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .datametria-tree-node__content:hover {
+    background-color: var(--dm-color-background-hover-dark, #2a2a2a);
   }
-}
-
-const handleCheckChange = (event: Event) => {
-  const target = event.target as HTMLInputElement
-  emit('check', props.node, target.checked)
-}
-</script>
 
-<style scoped>
-.datametria-tree-node {
-  user-select: none;
-}
-
-.datametria-tree-node__content {
-  display: flex;
-  align-items: center;
-  padding: 4px 8px;
-  cursor: pointer;
-  border-radius: 4px;
-  transition: background-color 0.2s;
-}
-
-.datametria-tree-node__content:hover {
-  background-color: var(--dm-color-background-hover, #f5f5f5);
-}
-
-.datametria-tree-node__content.is-leaf {
-  padding-left: 24px;
-}
-
-.datametria-tree-node__expand {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  margin-right: 4px;
-  cursor: pointer;
-}
-
-.datametria-tree-node__expand--leaf {
-  cursor: default;
-}
-
-.datametria-tree-node__icon {
-  font-size: 10px;
-  color: var(--dm-color-text-secondary, #666);
-  transition: transform 0.2s;
-}
-
-.datametria-tree-node__checkbox {
-  margin-right: 8px;
-  cursor: pointer;
-}
-
-.datametria-tree-node__label {
-  flex: 1;
-  font-size: var(--dm-font-size-base, 14px);
-  color: var(--dm-color-text, #333);
-}
-
-.datametria-tree-node__children {
-  padding-left: 20px;
-}
-
-@media (prefers-color-scheme: dark) {
-  .datametria-tree-node__content:hover {
-    background-color: var(--dm-color-background-hover-dark, #2a2a2a);
-  }
-
-  .datametria-tree-node__icon {
-    color: var(--dm-color-text-secondary-dark, #999);
-  }
-
-  .datametria-tree-node__label {
-    color: var(--dm-color-text-dark, #e0e0e0);
-  }
-}
-</style>
+[data-theme="dark"] .datametria-tree-node__content:hover {
+background-color: var(--dm-color-background-hover-dark, #2a2a2a);
+}
+
+  .datametria-tree-node__icon {
+    color: var(--dm-color-text-secondary-dark, #999);
+  }
+
+  .datametria-tree-node__label {
+    color: var(--dm-color-text-dark, #e0e0e0);
+  }
+}
+</style>