@phelan/design 0.0.1 → 0.0.2

package/docs/examples/radio/with-borders.vue

@@ -1,77 +0,0 @@
-<template>
-  <div>
-    <m-radio-group v-model="radio1">
-      <m-radio
-        value="1"
-        size="large"
-        border
-        >Option A</m-radio
-      >
-      <m-radio
-        value="2"
-        size="large"
-        border
-        >Option B</m-radio
-      >
-    </m-radio-group>
-  </div>
-  <div style="margin-top: 20px">
-    <m-radio-group v-model="radio2">
-      <m-radio
-        value="1"
-        border
-        >Option A</m-radio
-      >
-      <m-radio
-        value="2"
-        border
-        >Option B</m-radio
-      >
-    </m-radio-group>
-  </div>
-  <div style="margin-top: 20px">
-    <m-radio-group
-      v-model="radio3"
-      size="small"
-    >
-      <m-radio
-        value="1"
-        border
-        >Option A</m-radio
-      >
-      <m-radio
-        value="2"
-        border
-        disabled
-        >Option B</m-radio
-      >
-    </m-radio-group>
-  </div>
-  <div style="margin-top: 20px">
-    <m-radio-group
-      v-model="radio4"
-      size="small"
-      disabled
-    >
-      <m-radio
-        value="1"
-        border
-        >Option A</m-radio
-      >
-      <m-radio
-        value="2"
-        border
-        >Option B</m-radio
-      >
-    </m-radio-group>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const radio1 = ref('1');
-const radio2 = ref('1');
-const radio3 = ref('1');
-const radio4 = ref('1');
-</script>

package/docs/examples/result/index.vue

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

package/docs/examples/scrollbar/horizontal.vue

@@ -1,39 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-scrollbar>
-      <div class="scrollbar-flex-content">
-        <p
-          v-for="item in 50"
-          :key="item"
-          class="scrollbar-demo-item"
-        >
-          {{ item }}
-        </p>
-      </div>
-    </m-scrollbar>
-  </div>
-</template>
-
-<script lang="ts" setup>
-// 横向滚动示例
-</script>
-
-<style scoped>
-.scrollbar-flex-content {
-  display: flex;
-  width: fit-content;
-}
-.scrollbar-demo-item {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100px;
-  height: 50px;
-  margin: 10px;
-  text-align: center;
-  border-radius: 4px;
-  background: var(--el-color-danger-light-9);
-  color: var(--el-color-danger);
-}
-</style>

package/docs/examples/scrollbar/index.vue

@@ -1,31 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-scrollbar height="400px">
-      <p
-        v-for="item in 20"
-        :key="item"
-        class="scrollbar-demo-item"
-      >
-        {{ item }}
-      </p>
-    </m-scrollbar>
-  </div>
-</template>
-
-<script lang="ts" setup>
-// 基础用法示例
-</script>
-
-<style scoped>
-.scrollbar-demo-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 50px;
-  margin: 10px;
-  text-align: center;
-  border-radius: 4px;
-  background: var(--el-color-primary-light-9);
-  color: var(--el-color-primary);
-}
-</style>

package/docs/examples/scrollbar/infinite.vue

@@ -1,43 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-scrollbar
-      height="400px"
-      @end-reached="loadMore"
-    >
-      <p
-        v-for="item in num"
-        :key="item"
-        class="scrollbar-demo-item"
-      >
-        {{ item }}
-      </p>
-    </m-scrollbar>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import type { ScrollbarDirection } from 'element-plus';
-
-const num = ref(30);
-
-const loadMore = (direction: ScrollbarDirection) => {
-  if (direction === 'bottom') {
-    num.value += 5;
-  }
-};
-</script>
-
-<style scoped>
-.scrollbar-demo-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 50px;
-  margin: 10px;
-  text-align: center;
-  border-radius: 4px;
-  background: var(--el-color-primary-light-9);
-  color: var(--el-color-primary);
-}
-</style>

package/docs/examples/scrollbar/manual.vue

@@ -1,68 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-scrollbar
-      ref="scrollbarRef"
-      height="400px"
-      always
-      @scroll="scroll"
-    >
-      <div ref="innerRef">
-        <p
-          v-for="item in 20"
-          :key="item"
-          class="scrollbar-demo-item"
-        >
-          {{ item }}
-        </p>
-      </div>
-    </m-scrollbar>
-
-    <el-slider
-      v-model="value"
-      :max="max"
-      :format-tooltip="formatTooltip"
-      @input="inputSlider"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import type { ScrollbarInstance } from 'element-plus';
-
-type Arrayable<T> = T | T[];
-
-const max = ref(0);
-const value = ref(0);
-const innerRef = ref<HTMLDivElement>();
-const scrollbarRef = ref<ScrollbarInstance>();
-
-onMounted(() => {
-  max.value = innerRef.value!.clientHeight - 380;
-});
-
-const inputSlider = (value: Arrayable<number>) => {
-  scrollbarRef.value!.setScrollTop(value as number);
-};
-const scroll = ({ scrollTop }: { scrollTop: number }) => {
-  value.value = scrollTop;
-};
-const formatTooltip = (value: number) => `${value} px`;
-</script>
-
-<style scoped>
-.scrollbar-demo-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 50px;
-  margin: 10px;
-  text-align: center;
-  border-radius: 4px;
-  background: var(--el-color-primary-light-9);
-  color: var(--el-color-primary);
-}
-.el-slider {
-  margin-top: 20px;
-}
-</style>

package/docs/examples/scrollbar/max-height.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-button @click="add">Add Item</m-button>
-    <m-button @click="onDelete">Delete Item</m-button>
-    <m-scrollbar max-height="400px">
-      <p
-        v-for="item in count"
-        :key="item"
-        class="scrollbar-demo-item"
-      >
-        {{ item }}
-      </p>
-    </m-scrollbar>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const count = ref(3);
-
-const add = () => {
-  count.value++;
-};
-const onDelete = () => {
-  if (count.value > 0) {
-    count.value--;
-  }
-};
-</script>
-
-<style scoped>
-.scrollbar-demo-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 50px;
-  margin: 10px;
-  text-align: center;
-  border-radius: 4px;
-  background: var(--el-color-primary-light-9);
-  color: var(--el-color-primary);
-}
-</style>

package/docs/examples/search-panel/index.vue

@@ -1,108 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-search-panel
-      ref="formRef"
-      @search="handleSearch"
-    >
-      <m-form :model="form">
-        <m-form-item
-          label="供应商"
-          prop="supplier"
-          v-model="form.supplier"
-        >
-          <el-select
-            placeholder="请选择"
-            clearable
-          ></el-select>
-        </m-form-item>
-        <m-form-item
-          label="商品编码"
-          prop="code"
-        >
-          <el-input
-            placeholder="请输入"
-            v-model="form.code"
-            clearable
-          ></el-input>
-        </m-form-item>
-        <m-form-item
-          label="商品名称"
-          prop="name"
-        >
-          <el-input
-            placeholder="请输入"
-            v-model="form.name"
-            clearable
-          ></el-input>
-        </m-form-item>
-        <m-form-item
-          label="大仓"
-          prop="store"
-        >
-          <el-select
-            placeholder="请选择"
-            v-model="form.store"
-            clearable
-          ></el-select>
-        </m-form-item>
-        <m-form-item
-          label="运输时间(天)"
-          prop="time"
-          v-model="form.time"
-        >
-          <el-select
-            placeholder="请选择"
-            clearable
-          ></el-select>
-        </m-form-item>
-        <m-form-item
-          label="创建日期"
-          prop="date"
-        >
-          <el-select
-            placeholder="请选择"
-            v-model="form.date"
-            clearable
-          ></el-select>
-        </m-form-item>
-        <m-form-item
-          label="创建日期"
-          prop="test"
-        >
-          <el-input
-            placeholder="请选择"
-            v-model="form.test"
-            clearable
-          ></el-input>
-        </m-form-item>
-      </m-form>
-    </m-search-panel>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { type FormInstance } from 'element-plus';
-import { ElMessage } from 'element-plus';
-import { reactive, ref } from 'vue';
-
-const formRef = ref<{ getForm: () => FormInstance }>();
-const form = reactive({
-  supplier: '',
-  code: '',
-  name: '',
-  store: '',
-  time: null,
-  date: null,
-  test: null,
-});
-
-const handleSearch = () => {
-  ElMessage.success('调用查询方法');
-  console.log(form);
-};
-
-// const handleReset = () => {
-//   ElMessage.success('调用重置方法');
-//   formRef.value?.getForm().resetFields();
-// };
-</script>

package/docs/examples/search-panel/nowrap.vue

@@ -1,115 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-search-panel
-      ref="formRef"
-      @search="handleSearch"
-      :expandable="false"
-    >
-      <m-form :model="form">
-        <m-form-item
-          label="供应商"
-          prop="supplier"
-          v-model="form.supplier"
-        >
-          <el-select
-            placeholder="请选择"
-            clearable
-          ></el-select>
-        </m-form-item>
-      </m-form>
-    </m-search-panel>
-    <m-search-panel
-      ref="formRef"
-      @search="handleSearch"
-      :expandable="false"
-    >
-      <m-form :model="form">
-        <m-form-item
-          label="供应商"
-          prop="supplier"
-          v-model="form.supplier"
-        >
-          <el-select
-            placeholder="请选择"
-            clearable
-          ></el-select>
-        </m-form-item>
-        <m-form-item
-          label="商品编码"
-          prop="code"
-        >
-          <el-input
-            placeholder="请输入"
-            v-model="form.code"
-            clearable
-          ></el-input>
-        </m-form-item>
-      </m-form>
-    </m-search-panel>
-    <m-search-panel
-      ref="formRef"
-      @search="handleSearch"
-      :expandable="false"
-    >
-      <m-form :model="form">
-        <m-form-item
-          label="供应商"
-          prop="supplier"
-          v-model="form.supplier"
-        >
-          <el-select
-            placeholder="请选择"
-            clearable
-          ></el-select>
-        </m-form-item>
-        <m-form-item
-          label="商品编码"
-          prop="code"
-        >
-          <el-input
-            placeholder="请输入"
-            v-model="form.code"
-            clearable
-          ></el-input>
-        </m-form-item>
-        <m-form-item
-          label="商品编码"
-          prop="code"
-        >
-          <el-input
-            placeholder="请输入"
-            v-model="form.code"
-            clearable
-          ></el-input>
-        </m-form-item>
-      </m-form>
-    </m-search-panel>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { type FormInstance } from 'element-plus';
-import { ElMessage } from 'element-plus';
-import { reactive, ref } from 'vue';
-
-const formRef = ref<{ getForm: () => FormInstance }>();
-const form = reactive({
-  supplier: '',
-  code: '',
-  name: '',
-  store: '',
-  time: null,
-  date: null,
-  test: null,
-});
-
-const handleSearch = () => {
-  ElMessage.success('调用查询方法');
-  console.log(form);
-};
-
-// const handleReset = () => {
-//   ElMessage.success('调用重置方法');
-//   formRef.value?.getForm().resetFields();
-// };
-</script>

package/docs/examples/select/allow-create.vue

@@ -1,36 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-select
-      style="width: 240px"
-      v-model="value"
-      multiple
-      filterable
-      allow-create
-      default-first-option
-      placeholder="请选择或创建标签"
-    >
-      <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: 'HTML', label: 'HTML' },
-  { value: 'CSS', label: 'CSS' },
-  { value: 'JavaScript', label: 'JavaScript' },
-]);
-</script>

package/docs/examples/select/clearable.vue

@@ -1,29 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-select
-      style="width: 240px"
-      v-model="value"
-      placeholder="请选择"
-      clearable
-    >
-      <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/collapse-tags.vue

@@ -1,54 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-select
-      v-model="value1"
-      multiple
-      collapse-tags
-      placeholder="请选择"
-      style="width: 240px"
-    >
-      <m-option
-        v-for="item in options"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value"
-      />
-    </m-select>
-  </div>
-  <div class="vp-raw mt-4">
-    <m-select
-      v-model="value2"
-      multiple
-      collapse-tags
-      collapse-tags-tooltip
-      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 } from 'vue';
-
-interface Option {
-  value: string;
-  label: string;
-}
-
-const value1 = ref([]);
-const value2 = 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/custom-template.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-select
-      v-model="value"
-      placeholder="请选择"
-      style="width: 240px"
-    >
-      <m-option
-        v-for="item in cities"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value"
-      >
-        <span style="float: left">{{ item.label }}</span>
-        <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">{{
-          item.value
-        }}</span>
-      </m-option>
-    </m-select>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-interface City {
-  value: string;
-  label: string;
-}
-
-const value = ref('');
-const cities = ref<City[]>([
-  { value: 'Beijing', label: '北京' },
-  { value: 'Shanghai', label: '上海' },
-  { value: 'Nanjing', label: '南京' },
-  { value: 'Chengdu', label: '成都' },
-  { value: 'Shenzhen', label: '深圳' },
-  { value: 'Guangzhou', label: '广州' },
-]);
-</script>