@phelan/design 0.0.1 → 0.0.2

package/docs/examples/tabs/index.vue

@@ -1,46 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-tabs
-      v-model="activeName"
-      class="demo-tabs"
-      @tab-click="handleClick"
-    >
-      <m-tab-pane
-        label="全部"
-        name=""
-        >全部</m-tab-pane
-      >
-      <m-tab-pane
-        label="User"
-        name="first"
-        >User</m-tab-pane
-      >
-      <m-tab-pane
-        label="Config"
-        name="second"
-        >Config</m-tab-pane
-      >
-    </m-tabs>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-import type { TabsPaneContext } from 'element-plus';
-
-const activeName = ref('');
-
-const handleClick = (tab: TabsPaneContext, event: Event) => {
-  console.log(tab, event);
-};
-</script>
-
-<style>
-.demo-tabs > .el-tabs__content {
-  padding: 32px;
-  color: #6b778c;
-  font-size: 32px;
-  font-weight: 600;
-}
-</style>

package/docs/examples/tag/basic.vue

@@ -1,20 +0,0 @@
-<template>
-  <m-tag
-    v-for="item in items"
-    style="margin-right: 8px"
-    :key="item.label"
-    :type="item.type"
-  >
-    {{ item.label }}
-  </m-tag>
-  <br />
-</template>
-<script setup lang="ts">
-const items = [
-  { type: 'primary', label: 'Tag 1' },
-  { type: 'success', label: 'Tag 2' },
-  { type: 'info', label: 'Tag 3' },
-  { type: 'warning', label: 'Tag 4' },
-  { type: 'error', label: 'Tag 5' },
-];
-</script>

package/docs/examples/tag/closable.vue

@@ -1,31 +0,0 @@
-<template>
-  <m-tag
-    v-for="item in items"
-    style="margin-right: 8px"
-    :key="item.label"
-    :type="item.type"
-    closable
-    @click="handleClick"
-    @close="handleClose"
-  >
-    {{ item.label }}
-  </m-tag>
-  <br />
-</template>
-<script setup lang="ts">
-const items = [
-  { type: 'primary', label: 'Tag 1' },
-  { type: 'success', label: 'Tag 2' },
-  { type: 'info', label: 'Tag 3' },
-  { type: 'warning', label: 'Tag 4' },
-  { type: 'error', label: 'Tag 5' },
-];
-
-const handleClick = () => {
-  console.log('handleClick');
-};
-
-const handleClose = () => {
-  console.log('handleClose');
-};
-</script>

package/docs/examples/tag/dot.vue

@@ -1,21 +0,0 @@
-<template>
-  <m-tag
-    v-for="item in items"
-    style="margin-right: 8px"
-    :key="item.label"
-    dot
-    :type="item.type"
-  >
-    {{ item.label }}
-  </m-tag>
-  <br />
-</template>
-<script setup lang="ts">
-const items = [
-  { type: 'primary', label: 'Tag 1' },
-  { type: 'success', label: 'Tag 2' },
-  { type: 'info', label: 'Tag 3' },
-  { type: 'warning', label: 'Tag 4' },
-  { type: 'error', label: 'Tag 5' },
-];
-</script>

package/docs/examples/tag/effect.vue

@@ -1,35 +0,0 @@
-<template>
-  <div style="display: flex; align-items: center; margin-bottom: 10px">
-    <span style="margin-right: 6px">Light</span>
-    <m-tag
-      v-for="item in items"
-      style="margin-right: 8px"
-      :key="item.label"
-      :type="item.type"
-      effect="light"
-    >
-      {{ item.label }}
-    </m-tag>
-  </div>
-  <div style="display: flex; align-items: center">
-    <span style="margin-right: 6px">Plain</span>
-    <m-tag
-      v-for="item in items"
-      style="margin-right: 8px"
-      :key="item.label"
-      :type="item.type"
-      effect="plain"
-    >
-      {{ item.label }}
-    </m-tag>
-  </div>
-</template>
-<script setup lang="ts">
-const items = [
-  { type: 'primary', label: 'Tag 1' },
-  { type: 'success', label: 'Tag 2' },
-  { type: 'info', label: 'Tag 3' },
-  { type: 'warning', label: 'Tag 4' },
-  { type: 'error', label: 'Tag 5' },
-];
-</script>

package/docs/examples/tag/icon.vue

@@ -1,21 +0,0 @@
-<template>
-  <m-tag
-    v-for="item in items"
-    style="margin-right: 8px"
-    :key="item.label"
-    icon
-    :type="item.type"
-  >
-    {{ item.label }}
-  </m-tag>
-  <br />
-</template>
-<script setup lang="ts">
-const items = [
-  { type: 'primary', label: 'Tag 1' },
-  { type: 'success', label: 'Tag 2' },
-  { type: 'info', label: 'Tag 3' },
-  { type: 'warning', label: 'Tag 4' },
-  { type: 'error', label: 'Tag 5' },
-];
-</script>

package/docs/examples/text/index.vue

@@ -1,3 +0,0 @@
-<template>
-  <m-text></m-text>
-</template>

package/docs/examples/time-picker/disabled.vue

@@ -1,53 +0,0 @@
-<template>
-  <div class="example-basic">
-    <m-time-picker
-      v-model="value1"
-      :disabled-hours="disabledHours"
-      :disabled-minutes="disabledMinutes"
-      :disabled-seconds="disabledSeconds"
-      placeholder="请选择时间"
-    />
-    <m-time-picker
-      v-model="value2"
-      disabled
-      placeholder="请选择时间"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const value1 = ref(new Date(2016, 9, 10, 18, 30));
-const value2 = ref(new Date(2016, 9, 10, 18, 30));
-
-const makeRange = (start: number, end: number) => {
-  const result: number[] = [];
-  for (let i = start; i <= end; i++) {
-    result.push(i);
-  }
-  return result;
-};
-const disabledHours = () => {
-  return makeRange(0, 16).concat(makeRange(19, 23));
-};
-const disabledMinutes = (hour: number) => {
-  if (hour === 17) {
-    return makeRange(0, 29);
-  }
-  if (hour === 18) {
-    return makeRange(31, 59);
-  }
-};
-const disabledSeconds = (hour: number, minute: number) => {
-  if (hour === 18 && minute === 30) {
-    return makeRange(1, 59);
-  }
-};
-</script>
-
-<style>
-.example-basic .el-date-editor {
-  margin: 8px;
-}
-</style>

package/docs/examples/time-picker/index.vue

@@ -1,49 +0,0 @@
-<template>
-  <div class="example-basic">
-    <h2>时分秒</h2>
-    <m-time-picker
-      v-model="value1"
-      format="HH:mm:ss"
-      value-format="HH:mm:ss"
-      placeholder="请选择时间"
-      :clearable="true"
-      :editable="true"
-    />
-    <m-time-picker
-      v-model="value2"
-      arrow-control
-      placeholder="请选择时间"
-    />
-  </div>
-  <h2>时分</h2>
-  <div class="example-basic">
-    <m-time-picker
-      v-model="value3"
-      format="HH:mm"
-      value-format="HH:mm"
-      placeholder="请选择时间"
-    />
-    <m-time-picker
-      v-model="value4"
-      format="HH:mm"
-      value-format="HH:mm"
-      arrow-control
-      placeholder="请选择时间"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const value1 = ref();
-const value2 = ref();
-const value3 = ref();
-const value4 = ref();
-</script>
-
-<style>
-.example-basic .el-date-editor {
-  margin: 8px;
-}
-</style>

package/docs/examples/time-picker/range.vue

@@ -1,36 +0,0 @@
-<template>
-  <div class="demo-range">
-    <m-time-picker
-      v-model="value1"
-      is-range
-      range-separator="To"
-      start-placeholder="Start time"
-      end-placeholder="End time"
-    />
-    <m-time-picker
-      v-model="value2"
-      is-range
-      arrow-control
-      range-separator="To"
-      start-placeholder="Start time"
-      end-placeholder="End time"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const value1 = ref<[Date, Date]>([new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]);
-const value2 = ref<[Date, Date]>([new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]);
-</script>
-
-<style>
-.demo-range .el-date-editor {
-  margin: 8px;
-}
-
-.demo-range .el-range-separator {
-  box-sizing: content-box;
-}
-</style>

package/docs/examples/time-select/disabled.vue

@@ -1,30 +0,0 @@
-<template>
-  <div class="demo-time-range flex flex-wrap gap-4">
-    <m-time-select
-      v-model="startTime"
-      style="width: 240px"
-      :max-time="endTime"
-      placeholder="Start time"
-      start="08:30"
-      step="00:15"
-      end="18:30"
-    />
-    -
-    <m-time-select
-      v-model="endTime"
-      style="width: 240px"
-      :min-time="startTime"
-      placeholder="End time"
-      start="08:30"
-      step="00:15"
-      end="18:30"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const startTime = ref('');
-const endTime = ref('');
-</script>

package/docs/examples/time-select/index.vue

@@ -1,29 +0,0 @@
-<template>
-  <h2>常规状态</h2>
-  <m-time-select
-    v-model="value"
-    style="width: 240px"
-    start="08:30"
-    step="00:15"
-    end="18:30"
-    placeholder="请选择时间"
-    :clearable="true"
-  />
-  <h2>禁用状态</h2>
-
-  <m-time-select
-    v-model="value"
-    style="width: 240px"
-    start="08:30"
-    step="00:15"
-    end="18:30"
-    placeholder="请选择时间"
-    disabled
-  />
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const value = ref('');
-</script>

package/docs/examples/tooltip/disabled.vue

@@ -1,20 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-tooltip
-      content="Top Left prompts info"
-      :disabled="disabled"
-    >
-      <template #default>
-        <m-button @click="disabled = !disabled">
-          Click me to {{ disabled ? 'enable' : 'disable' }}
-        </m-button>
-      </template>
-    </m-tooltip>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const disabled = ref(false);
-</script>

package/docs/examples/tooltip/index.vue

@@ -1,63 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-tooltip
-      content="Top Left prompts info"
-      placement="top-start"
-    >
-      <template #default>
-        <m-button>top-start</m-button>
-      </template>
-    </m-tooltip>
-    <m-tooltip
-      content="Top Center prompts info"
-      placement="top"
-    >
-      <template #default>
-        <m-button>top</m-button>
-      </template>
-    </m-tooltip>
-    <m-tooltip
-      content="Top Right prompts info"
-      placement="top-end"
-    >
-      <template #default>
-        <m-button>top-end</m-button>
-      </template>
-    </m-tooltip>
-    <m-tooltip
-      content="Bottom Left prompts info"
-      placement="bottom-start"
-    >
-      <template #default>
-        <m-button>bottom-start</m-button>
-      </template>
-    </m-tooltip>
-    <m-tooltip
-      content="Bottom Center prompts info"
-      placement="bottom"
-    >
-      <template #default>
-        <m-button>bottom</m-button>
-      </template>
-    </m-tooltip>
-    <m-tooltip
-      content="Bottom Right prompts info"
-      placement="bottom-end"
-      hide-after="200000"
-    >
-      <template #default>
-        <m-button>bottom-end</m-button>
-      </template>
-    </m-tooltip>
-  </div>
-</template>
-
-<script lang="ts" setup>
-// 基础用法示例
-</script>
-
-<style scoped>
-.m-button + .m-button {
-  margin-left: 8px;
-}
-</style>

package/docs/examples/tooltip/more-content.vue

@@ -1,19 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-tooltip placement="top">
-      <template #content>
-        <div>multiple lines</div>
-        <div>
-          <span>second line</span>
-        </div>
-      </template>
-      <template #default>
-        <m-button>Hover me</m-button>
-      </template>
-    </m-tooltip>
-  </div>
-</template>
-
-<script lang="ts" setup>
-// 更多内容示例
-</script>

package/docs/examples/tooltip/theme.vue

@@ -1,32 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-tooltip
-      content="Top Left prompts info"
-      placement="top"
-      effect="dark"
-    >
-      <template #default>
-        <m-button>Dark</m-button>
-      </template>
-    </m-tooltip>
-    <m-tooltip
-      content="Top Left prompts info"
-      placement="bottom"
-      effect="light"
-    >
-      <template #default>
-        <m-button>Light</m-button>
-      </template>
-    </m-tooltip>
-  </div>
-</template>
-
-<script lang="ts" setup>
-// 主题示例
-</script>
-
-<style scoped>
-.m-button + .m-button {
-  margin-left: 8px;
-}
-</style>

package/docs/examples/tooltip/virtual-trigger.vue

@@ -1,31 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-button
-      ref="buttonRef"
-      v-click-outside="onClickOutside"
-    >
-      Click me
-    </m-button>
-
-    <m-tooltip
-      ref="tooltipRef"
-      :virtual-ref="buttonRef"
-      trigger="click"
-      virtual-triggering
-    >
-      <span> Some content </span>
-    </m-tooltip>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { ClickOutside as vClickOutside } from 'element-plus';
-import type { TooltipInstance } from 'element-plus';
-
-const buttonRef = ref();
-const tooltipRef = ref<TooltipInstance>();
-const onClickOutside = () => {
-  tooltipRef.value?.hide();
-};
-</script>

package/docs/examples/tour/index.vue

@@ -1,3 +0,0 @@
-<template>
-  <m-tour></m-tour>
-</template>

package/docs/examples/tree/basic.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>