@phelan/design 0.0.1 → 0.0.2

package/docs/examples/tree/checkable.vue

@@ -1,65 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-tree
-      style="max-width: 600px"
-      :props="props"
-      :load="loadNode"
-      lazy
-      show-checkbox
-      @check-change="handleCheckChange"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import type { LoadFunction } from 'element-plus';
-
-interface Tree {
-  name: string;
-}
-
-let count = 1;
-const props = {
-  label: 'name',
-  children: 'zones',
-};
-
-const handleCheckChange = (data: Tree, checked: boolean, indeterminate: boolean) => {
-  console.log(data, checked, indeterminate);
-};
-
-const loadNode: LoadFunction = (node, resolve) => {
-  if (node.level === 0) {
-    return resolve([{ name: 'Root1' }, { name: 'Root2' }]);
-  }
-  if (node.level > 3) return resolve([]);
-
-  let hasChild = false;
-  if (node.data.name === 'region1') {
-    hasChild = true;
-  } else if (node.data.name === 'region2') {
-    hasChild = false;
-  } else {
-    hasChild = Math.random() > 0.5;
-  }
-
-  setTimeout(() => {
-    let data: Tree[] = [];
-    if (hasChild) {
-      data = [
-        {
-          name: `zone${count++}`,
-        },
-        {
-          name: `zone${count++}`,
-        },
-      ];
-    } else {
-      data = [];
-    }
-
-    resolve(data);
-  }, 500);
-};
-</script>

package/docs/examples/tree/custom-node.vue

@@ -1,123 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-tree
-      style="max-width: 600px"
-      :data="dataSource"
-      show-checkbox
-      node-key="id"
-      default-expand-all
-      :expand-on-click-node="false"
-    >
-      <template #default="{ node, data }">
-        <div class="custom-tree-node">
-          <span>{{ node.label }}</span>
-          <div>
-            <m-button
-              type="primary"
-              link
-              @click="append(data)"
-            >
-              Append
-            </m-button>
-            <m-button
-              style="margin-left: 4px"
-              type="danger"
-              link
-              @click="remove(node, data)"
-            >
-              Delete
-            </m-button>
-          </div>
-        </div>
-      </template>
-    </m-tree>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import type { RenderContentContext } from 'element-plus';
-
-interface Tree {
-  id: number;
-  label: string;
-  children?: Tree[];
-}
-
-type Node = RenderContentContext['node'];
-type Data = RenderContentContext['data'];
-
-let id = 1000;
-const treeRef = ref();
-
-const append = (data: Data) => {
-  const newChild = { id: id++, label: 'testtest', children: [] };
-  treeRef.value?.append(newChild, data);
-};
-
-const remove = (node: Node, data: Data) => {
-  treeRef.value?.remove(data);
-};
-
-const dataSource = ref<Tree[]>([
-  {
-    id: 1,
-    label: 'Level one 1',
-    children: [
-      {
-        id: 4,
-        label: 'Level two 1-1',
-        children: [
-          {
-            id: 9,
-            label: 'Level three 1-1-1',
-          },
-          {
-            id: 10,
-            label: 'Level three 1-1-2',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    id: 2,
-    label: 'Level one 2',
-    children: [
-      {
-        id: 5,
-        label: 'Level two 2-1',
-      },
-      {
-        id: 6,
-        label: 'Level two 2-2',
-      },
-    ],
-  },
-  {
-    id: 3,
-    label: 'Level one 3',
-    children: [
-      {
-        id: 7,
-        label: 'Level two 3-1',
-      },
-      {
-        id: 8,
-        label: 'Level two 3-2',
-      },
-    ],
-  },
-]);
-</script>
-
-<style scoped>
-.custom-tree-node {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 14px;
-  padding-right: 8px;
-}
-</style>

package/docs/examples/tree/default-expanded.vue

@@ -1,73 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-tree
-      style="max-width: 600px"
-      :data="data"
-      show-checkbox
-      node-key="id"
-      :default-expanded-keys="[2, 3]"
-      :default-checked-keys="[5]"
-      :props="defaultProps"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const defaultProps = {
-  children: 'children',
-  label: 'label',
-};
-
-const data = ref([
-  {
-    id: 1,
-    label: 'Level one 1',
-    children: [
-      {
-        id: 4,
-        label: 'Level two 1-1',
-        children: [
-          {
-            id: 9,
-            label: 'Level three 1-1-1',
-          },
-          {
-            id: 10,
-            label: 'Level three 1-1-2',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    id: 2,
-    label: 'Level one 2',
-    children: [
-      {
-        id: 5,
-        label: 'Level two 2-1',
-      },
-      {
-        id: 6,
-        label: 'Level two 2-2',
-      },
-    ],
-  },
-  {
-    id: 3,
-    label: 'Level one 3',
-    children: [
-      {
-        id: 7,
-        label: 'Level two 3-1',
-      },
-      {
-        id: 8,
-        label: 'Level two 3-2',
-      },
-    ],
-  },
-]);
-</script>

package/docs/examples/tree/draggable.vue

@@ -1,123 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-tree
-      style="max-width: 600px"
-      :allow-drop="allowDrop"
-      :allow-drag="allowDrag"
-      :data="data"
-      draggable
-      default-expand-all
-      node-key="id"
-      @node-drag-start="handleDragStart"
-      @node-drag-enter="handleDragEnter"
-      @node-drag-leave="handleDragLeave"
-      @node-drag-over="handleDragOver"
-      @node-drag-end="handleDragEnd"
-      @node-drop="handleDrop"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import type { AllowDropType, NodeDropType, RenderContentContext } from 'element-plus';
-
-type Node = RenderContentContext['node'];
-
-const handleDragStart = (node: Node, ev: DragEvent) => {
-  console.log('drag start', node);
-};
-const handleDragEnter = (draggingNode: Node, dropNode: Node, ev: DragEvent) => {
-  console.log('tree drag enter:', dropNode.label);
-};
-const handleDragLeave = (draggingNode: Node, dropNode: Node, ev: DragEvent) => {
-  console.log('tree drag leave:', dropNode.label);
-};
-const handleDragOver = (draggingNode: Node, dropNode: Node, ev: DragEvent) => {
-  console.log('tree drag over:', dropNode.label);
-};
-const handleDragEnd = (
-  draggingNode: Node,
-  dropNode: Node | null,
-  dropType: NodeDropType,
-  ev: DragEvent,
-) => {
-  console.log('tree drag end:', dropNode && dropNode.label, dropType);
-};
-const handleDrop = (
-  draggingNode: Node,
-  dropNode: Node,
-  dropType: Exclude<NodeDropType, 'none'>,
-  ev: DragEvent,
-) => {
-  console.log('tree drop:', dropNode.label, dropType);
-};
-const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
-  if (dropNode.data.label === 'Level two 3-1') {
-    return type !== 'inner';
-  } else {
-    return true;
-  }
-};
-const allowDrag = (draggingNode: Node) => {
-  return !draggingNode.data.label.includes('Level three 3-1-1');
-};
-
-const data = ref([
-  {
-    label: 'Level one 1',
-    children: [
-      {
-        label: 'Level two 1-1',
-        children: [
-          {
-            label: 'Level three 1-1-1',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: 'Level one 2',
-    children: [
-      {
-        label: 'Level two 2-1',
-        children: [
-          {
-            label: 'Level three 2-1-1',
-          },
-        ],
-      },
-      {
-        label: 'Level two 2-2',
-        children: [
-          {
-            label: 'Level three 2-2-1',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: 'Level one 3',
-    children: [
-      {
-        label: 'Level two 3-1',
-        children: [
-          {
-            label: 'Level three 3-1-1',
-          },
-        ],
-      },
-      {
-        label: 'Level two 3-2',
-        children: [
-          {
-            label: 'Level three 3-2-1',
-          },
-        ],
-      },
-    ],
-  },
-]);
-</script>

package/docs/examples/tree/filter.vue

@@ -1,96 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <el-input
-      v-model="filterText"
-      class="w-60 mb-2"
-      placeholder="Filter keyword"
-    />
-
-    <m-tree
-      ref="treeRef"
-      style="max-width: 600px"
-      class="filter-tree"
-      :data="data"
-      :props="defaultProps"
-      default-expand-all
-      :filter-node-method="filterNode"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-import type { FilterNodeMethodFunction, TreeInstance } from 'element-plus';
-
-interface Tree {
-  [key: string]: any;
-}
-
-const filterText = ref('');
-const treeRef = ref<TreeInstance>();
-
-const defaultProps = {
-  children: 'children',
-  label: 'label',
-};
-
-watch(filterText, (val) => {
-  treeRef.value!.filter(val);
-});
-
-const filterNode: FilterNodeMethodFunction = (value: string, data: Tree) => {
-  if (!value) return true;
-  return data.label.includes(value);
-};
-
-const data = ref<Tree[]>([
-  {
-    id: 1,
-    label: 'Level one 1',
-    children: [
-      {
-        id: 4,
-        label: 'Level two 1-1',
-        children: [
-          {
-            id: 9,
-            label: 'Level three 1-1-1',
-          },
-          {
-            id: 10,
-            label: 'Level three 1-1-2',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    id: 2,
-    label: 'Level one 2',
-    children: [
-      {
-        id: 5,
-        label: 'Level two 2-1',
-      },
-      {
-        id: 6,
-        label: 'Level two 2-2',
-      },
-    ],
-  },
-  {
-    id: 3,
-    label: 'Level one 3',
-    children: [
-      {
-        id: 7,
-        label: 'Level two 3-1',
-      },
-      {
-        id: 8,
-        label: 'Level two 3-2',
-      },
-    ],
-  },
-]);
-</script>

package/docs/examples/tree/index.vue

@@ -1,86 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-tree
-      style="max-width: 600px"
-      :data="data"
-      :props="defaultProps"
-      @node-click="handleNodeClick"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-interface Tree {
-  label: string;
-  children?: Tree[];
-}
-
-const handleNodeClick = (data: Tree) => {
-  console.log(data);
-};
-
-const data = ref<Tree[]>([
-  {
-    label: 'Level one 1',
-    children: [
-      {
-        label: 'Level two 1-1',
-        children: [
-          {
-            label: 'Level three 1-1-1',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: 'Level one 2',
-    children: [
-      {
-        label: 'Level two 2-1',
-        children: [
-          {
-            label: 'Level three 2-1-1',
-          },
-        ],
-      },
-      {
-        label: 'Level two 2-2',
-        children: [
-          {
-            label: 'Level three 2-2-1',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: 'Level one 3',
-    children: [
-      {
-        label: 'Level two 3-1',
-        children: [
-          {
-            label: 'Level three 3-1-1',
-          },
-        ],
-      },
-      {
-        label: 'Level two 3-2',
-        children: [
-          {
-            label: 'Level three 3-2-1',
-          },
-        ],
-      },
-    ],
-  },
-]);
-
-const defaultProps = {
-  children: 'children',
-  label: 'label',
-};
-</script>

package/docs/examples/tree-select/basic.vue

@@ -1,96 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-tree-select
-      v-model="value"
-      :data="data"
-      :render-after-expand="false"
-      style="width: 240px"
-    />
-    <el-divider />
-    show checkbox:
-    <m-tree-select
-      v-model="value"
-      :data="data"
-      :render-after-expand="false"
-      show-checkbox
-      style="width: 240px"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const value = ref();
-
-const data = [
-  {
-    value: '1',
-    label: 'Level one 1',
-    children: [
-      {
-        value: '1-1',
-        label: 'Level two 1-1',
-        children: [
-          {
-            value: '1-1-1',
-            label: 'Level three 1-1-1',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    value: '2',
-    label: 'Level one 2',
-    children: [
-      {
-        value: '2-1',
-        label: 'Level two 2-1',
-        children: [
-          {
-            value: '2-1-1',
-            label: 'Level three 2-1-1',
-          },
-        ],
-      },
-      {
-        value: '2-2',
-        label: 'Level two 2-2',
-        children: [
-          {
-            value: '2-2-1',
-            label: 'Level three 2-2-1',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    value: '3',
-    label: 'Level one 3',
-    children: [
-      {
-        value: '3-1',
-        label: 'Level two 3-1',
-        children: [
-          {
-            value: '3-1-1',
-            label: 'Level three 3-1-1',
-          },
-        ],
-      },
-      {
-        value: '3-2',
-        label: 'Level two 3-2',
-        children: [
-          {
-            value: '3-2-1',
-            label: 'Level three 3-2-1',
-          },
-        ],
-      },
-    ],
-  },
-];
-</script>