@phelan/design 0.0.1

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

@@ -0,0 +1,29 @@
+<template>
+  <div class="vp-raw">
+    <m-select
+      v-model="value"
+      placeholder="请选择"
+      style="width: 240px"
+    >
+      <m-option
+        label="选项1"
+        value="option1"
+      />
+      <m-option
+        label="选项2"
+        value="option2"
+        disabled
+      />
+      <m-option
+        label="选项3"
+        value="option3"
+      />
+    </m-select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref('');
+</script>

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

@@ -0,0 +1,29 @@
+<template>
+  <div class="vp-raw">
+    <m-select
+      v-model="value"
+      placeholder="请选择"
+      style="width: 240px"
+      disabled
+    >
+      <m-option
+        label="选项1"
+        value="option1"
+      />
+      <m-option
+        label="选项2"
+        value="option2"
+      />
+      <m-option
+        label="选项3"
+        value="option3"
+      />
+    </m-select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref('option1');
+</script>

package/docs/examples/select/empty.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="vp-raw">
+    <m-select
+      v-model="value"
+      placeholder="请选择"
+      style="width: 240px"
+    >
+      <template #empty>
+        <div style="padding: 20px; text-align: center; color: var(--el-text-color-secondary)">
+          暂无数据
+        </div>
+      </template>
+    </m-select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref('');
+</script>

package/docs/examples/select/filterable.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="vp-raw">
+    <m-select
+      v-model="value"
+      filterable
+      placeholder="请选择或搜索"
+      style="width: 240px"
+    >
+      <m-option
+        label="黄金糕"
+        value="huangjingao"
+      />
+      <m-option
+        label="双皮奶"
+        value="shuangpinai"
+      />
+      <m-option
+        label="蚵仔煎"
+        value="kezaijian"
+      />
+      <m-option
+        label="龙须面"
+        value="longxumian"
+      />
+      <m-option
+        label="北京烤鸭"
+        value="beijingkaoya"
+      />
+    </m-select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref('');
+</script>

package/docs/examples/select/grouping.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="vp-raw">
+    <m-select
+      v-model="value"
+      placeholder="请选择"
+      style="width: 240px"
+    >
+      <m-option-group label="热门城市">
+        <m-option
+          label="上海"
+          value="Shanghai"
+        />
+        <m-option
+          label="北京"
+          value="Beijing"
+        />
+      </m-option-group>
+      <m-option-group label="城市名">
+        <m-option
+          label="成都"
+          value="Chengdu"
+        />
+        <m-option
+          label="深圳"
+          value="Shenzhen"
+        />
+        <m-option
+          label="广州"
+          value="Guangzhou"
+        />
+      </m-option-group>
+    </m-select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref('');
+</script>

package/docs/examples/select/header-footer.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="vp-raw">
+    <m-select
+      v-model="value"
+      placeholder="请选择"
+      style="width: 240px"
+    >
+      <template #header>
+        <div style="padding: 8px 12px; border-bottom: 1px solid var(--el-border-color)">
+          <span style="font-size: 14px; color: var(--el-text-color-primary)">自定义头部</span>
+        </div>
+      </template>
+      <m-option
+        label="选项1"
+        value="option1"
+      />
+      <m-option
+        label="选项2"
+        value="option2"
+      />
+      <m-option
+        label="选项3"
+        value="option3"
+      />
+      <template #footer>
+        <div style="padding: 8px 12px; border-top: 1px solid var(--el-border-color)">
+          <span style="font-size: 14px; color: var(--el-text-color-secondary)">自定义底部</span>
+        </div>
+      </template>
+    </m-select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref('');
+</script>

package/docs/examples/select/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="vp-raw">
+    <m-select
+      style="width: 240px"
+      v-model="value"
+      placeholder="请选择"
+    >
+      <m-option
+        label="选项1"
+        value="option1"
+      />
+      <m-option
+        label="选项2"
+        value="option2"
+      />
+      <m-option
+        label="选项3"
+        value="option3"
+      />
+    </m-select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref('');
+</script>

package/docs/examples/select/loading.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="vp-raw">
+    <m-select
+      v-model="value"
+      v-loading="loading"
+      placeholder="请选择"
+      style="width: 240px"
+    >
+      <m-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </m-select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+const value = ref('');
+const loading = ref(true);
+const options = ref<Option[]>([]);
+
+onMounted(() => {
+  setTimeout(() => {
+    options.value = [
+      { value: '1', label: '选项1' },
+      { value: '2', label: '选项2' },
+      { value: '3', label: '选项3' },
+    ];
+    loading.value = false;
+  }, 2000);
+});
+</script>

package/docs/examples/select/multiple-limit.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="vp-raw">
+    <m-select
+      v-model="value"
+      multiple
+      :multiple-limit="3"
+      placeholder="最多选择3个"
+      style="width: 240px"
+    >
+      <m-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </m-select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+const value = ref([]);
+const options = ref<Option[]>([
+  { value: '1', label: '选项1' },
+  { value: '2', label: '选项2' },
+  { value: '3', label: '选项3' },
+  { value: '4', label: '选项4' },
+  { value: '5', label: '选项5' },
+]);
+</script>

package/docs/examples/select/multiple.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="vp-raw">
+    <m-select
+      v-model="value"
+      multiple
+      placeholder="请选择"
+      style="width: 240px"
+    >
+      <m-option
+        label="选项1"
+        value="option1"
+      />
+      <m-option
+        label="选项2"
+        value="option2"
+      />
+      <m-option
+        label="选项3"
+        value="option3"
+      />
+      <m-option
+        label="选项4"
+        value="option4"
+      />
+      <m-option
+        label="选项5"
+        value="option5"
+      />
+    </m-select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref([]);
+</script>

package/docs/examples/select/remote-search.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="vp-raw">
+    <m-select
+      v-model="value"
+      filterable
+      remote
+      reserve-keyword
+      placeholder="请输入关键词"
+      :remote-method="remoteMethod"
+      :loading="loading"
+      style="width: 240px"
+    >
+      <m-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </m-select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+const value = ref('');
+const options = ref<Option[]>([]);
+const loading = ref(false);
+
+const list = ref<Option[]>([
+  { value: '1', label: '选项1' },
+  { value: '2', label: '选项2' },
+  { value: '3', label: '选项3' },
+  { value: '4', label: '选项4' },
+  { value: '5', label: '选项5' },
+]);
+
+const remoteMethod = (query: string) => {
+  if (query !== '') {
+    loading.value = true;
+    setTimeout(() => {
+      loading.value = false;
+      options.value = list.value.filter((item) => {
+        return item.label.toLowerCase().includes(query.toLowerCase());
+      });
+    }, 200);
+  } else {
+    options.value = [];
+  }
+};
+</script>

package/docs/examples/select/sizes.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="vp-raw">
+    <div class="mb-4">
+      <m-select
+        v-model="value1"
+        placeholder="Large"
+        size="large"
+        style="width: 240px"
+      >
+        <m-option
+          label="选项1"
+          value="option1"
+        />
+        <m-option
+          label="选项2"
+          value="option2"
+        />
+      </m-select>
+    </div>
+    <div class="mb-4">
+      <m-select
+        v-model="value2"
+        placeholder="Default"
+        style="width: 240px"
+      >
+        <m-option
+          label="选项1"
+          value="option1"
+        />
+        <m-option
+          label="选项2"
+          value="option2"
+        />
+      </m-select>
+    </div>
+    <div>
+      <m-select
+        v-model="value3"
+        placeholder="Small"
+        size="small"
+        style="width: 240px"
+      >
+        <m-option
+          label="选项1"
+          value="option1"
+        />
+        <m-option
+          label="选项2"
+          value="option2"
+        />
+      </m-select>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value1 = ref('');
+const value2 = ref('');
+const value3 = ref('');
+</script>

package/docs/examples/select/value-key.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="vp-raw">
+    <m-select
+      v-model="value"
+      value-key="id"
+      placeholder="请选择"
+      style="width: 240px"
+    >
+      <m-option
+        v-for="item in options"
+        :key="item.id"
+        :label="item.name"
+        :value="item"
+      />
+    </m-select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+interface Option {
+  id: number;
+  name: string;
+}
+
+const value = ref<Option | undefined>(undefined);
+const options = ref<Option[]>([
+  { id: 1, name: '选项1' },
+  { id: 2, name: '选项2' },
+  { id: 3, name: '选项3' },
+]);
+</script>

package/docs/examples/slider/index.vue

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

package/docs/examples/space/alignment.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="vp-raw">
+    <div class="alignment-container">
+      <m-space>
+        string
+        <m-button> button </m-button>
+        <el-card>
+          <template #header> header </template>
+          body
+        </el-card>
+      </m-space>
+    </div>
+    <div class="alignment-container">
+      <m-space alignment="flex-start">
+        string
+        <m-button> button </m-button>
+        <el-card>
+          <template #header> header </template>
+          body
+        </el-card>
+      </m-space>
+    </div>
+    <div class="alignment-container">
+      <m-space alignment="flex-end">
+        string
+        <m-button> button </m-button>
+        <el-card>
+          <template #header> header </template>
+          body
+        </el-card>
+      </m-space>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// 对齐方式示例
+</script>
+
+<style scoped>
+.alignment-container {
+  width: 240px;
+  margin-bottom: 20px;
+  padding: 8px;
+  border: 1px solid var(--el-border-color);
+}
+</style>

package/docs/examples/space/custom-size.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="vp-raw">
+    <el-slider v-model="size" />
+    <m-space
+      wrap
+      :size="size"
+    >
+      <el-card
+        v-for="i in 2"
+        :key="i"
+        class="box-card"
+        style="width: 250px"
+      >
+        <template #header>
+          <div class="card-header">
+            <span>Card name</span>
+            <m-button
+              class="button"
+              text
+            >
+              Operation button
+            </m-button>
+          </div>
+        </template>
+        <div
+          v-for="o in 4"
+          :key="o"
+          class="text item"
+        >
+          {{ 'List item ' + o }}
+        </div>
+      </el-card>
+    </m-space>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const size = ref(20);
+</script>
+
+<style scoped>
+.box-card {
+  width: 250px;
+}
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.text {
+  font-size: 14px;
+}
+.item {
+  margin-bottom: 18px;
+}
+</style>

package/docs/examples/space/fill-ratio.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="vp-raw">
+    <div style="margin-bottom: 15px">
+      direction:
+      <el-radio
+        v-model="direction"
+        value="horizontal"
+      >
+        horizontal
+      </el-radio>
+      <el-radio
+        v-model="direction"
+        value="vertical"
+      >
+        vertical
+      </el-radio>
+    </div>
+    <div style="margin-bottom: 15px"> fillRatio:<el-slider v-model="fillRatio" /> </div>
+    <m-space
+      fill
+      wrap
+      :fill-ratio="fillRatio"
+      :direction="direction"
+      style="width: 100%"
+    >
+      <el-card
+        v-for="i in 5"
+        :key="i"
+        class="box-card"
+      >
+        <template #header>
+          <div class="card-header">
+            <span>Card name</span>
+            <m-button
+              class="button"
+              text
+            >
+              Operation button
+            </m-button>
+          </div>
+        </template>
+        <div
+          v-for="o in 4"
+          :key="o"
+          class="text item"
+        >
+          {{ 'List item ' + o }}
+        </div>
+      </el-card>
+    </m-space>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import type { SpaceInstance } from 'element-plus';
+
+const direction = ref<SpaceInstance['direction']>('horizontal');
+const fillRatio = ref(30);
+</script>
+
+<style scoped>
+.box-card {
+  width: 250px;
+}
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.text {
+  font-size: 14px;
+}
+.item {
+  margin-bottom: 18px;
+}
+</style>