@qi-tian-da-sheng/bin-project-ui 1.0.0

package/packages/components/input/src/input.ts

@@ -0,0 +1,151 @@
+/*
+ * @description: 输入框
+ * @author: MC.Yang
+ */
+import {PropType} from "vue";
+import {ElementSizes} from "@bin-ui/typings";
+
+/**
+ * 输入类型
+ */
+const PInputTypes = [
+    'text',
+    'password',
+    'email'
+]
+
+/**
+ * 输入框 Props
+ */
+export const PInputProps = {
+
+    /**
+     * @description 输入框类型
+     */
+    type: {
+        type: String as PropType<(typeof PInputTypes)[number]>,
+        default: PInputTypes[0],
+    },
+
+    /**
+     * @description 输入框的绑定值
+     */
+    modelValue: [String, Number] as PropType<string | number>,
+    size: {
+        type: String as PropType<ElementSizes>,
+    },
+
+    /**
+     * @description test
+     */
+    placeholder: String,
+
+    /**
+     * @description 输入框绑定值的最大长度
+     */
+    maxLength: [Number, String] as PropType<number | string>,
+
+    /**
+     * @description 输入框绑定值的最小长度
+     */
+    minLength: [Number, String] as PropType<number | string>,
+
+    /**
+     * @description ID
+     */
+    id: String,
+
+    /**
+     * @description 是否在挂载后聚焦
+     */
+    autofocus: Boolean,
+
+    /**
+     * @description 是否禁用输入框
+     */
+    disabled: Boolean,
+
+    /**
+     * @description 是否是只读输入框
+     */
+    readonly: Boolean,
+
+    /**
+     * @description 绑定值是否可以被清空
+     */
+    clearable: Boolean,
+
+    /**
+     * @description 是否显示文字长度
+     */
+    showWordLimit: Boolean,
+
+    /**
+     * @description 是否显示密码切换图标
+     */
+    showPassword: Boolean,
+
+    /**
+     * @description 输入框前缀图标
+     */
+    prefixIcon: String,
+
+    /**
+     * @description 输入框后缀图标
+     */
+    suffixIcon: String,
+
+    /**
+     * @description 输入框绑定值的校验函数
+     */
+    checkFunc: Function as PropType<(value: string, alert?: (alertText?: string, alertIcon?: string) => void) => boolean>
+
+}
+
+/**
+ * 输入框事件
+ */
+export interface PInputEmits {
+
+    /**
+     * @description 更新 modelValue
+     * @param e update:modelValue
+     * @param value 值
+     */
+    (e: 'update:modelValue', value: String): void;
+
+    /**
+     * @description 绑定值被清空后触发的事件
+     * @param e clear
+     */
+    (e: 'clear'): void;
+
+    /**
+     * @description 输入框输入时触发的事件
+     * @param e input
+     * @param value 值
+     */
+    (e: 'input', value: String): void;
+
+    /**
+     * @description 绑定值发生变化
+     * @param e change
+     * @param value 值
+     */
+    (e: 'change', value: String): void;
+
+    /**
+     * @description 输入框失去焦点后触发的事件
+     * @param e blur
+     * @param evt 事件
+     */
+    (e: 'blur', evt: FocusEvent): void;
+
+    /**
+     * @description 输入框获取焦点后触发的事件
+     * @param e focus
+     * @param evt 事件
+     */
+    (e: 'focus', evt: FocusEvent): void;
+
+}

package/packages/components/input/src/input.vue

@@ -0,0 +1,300 @@
+<!--
+  @component Input 输入框组件
+  @description 通过鼠标或键盘输入字符，支持多种类型、验证、清空等功能
+  @author MC.Yang
+  @example
+  <p-input v-model="value" placeholder="请输入内容" />
+  <p-input type="password" :show-password="true" />
+  <p-input :clearable="true" :show-word-limit="true" :max-length="100" />
+-->
+<template>
+  <div ref="container"
+       :class="inputCls"
+       v-bind="$attrs"
+  >
+    <!-- 前置插槽：用于在输入框前面添加自定义内容，如按钮、标签等 -->
+    <div v-if="$slots.prefixSlot" :class="[ns.e('slot'), ns.em('slot', 'prefix')]">
+      <slot name="prefixSlot"></slot>
+    </div>
+
+    <!-- 输入框主体包装器 -->
+    <div :class="ns.e('wrapper')" ref="wrapper">
+      <!-- 前缀图标：显示在输入框内容左侧 -->
+      <p-icon :class="[ns.e('icon'), ns.em('icon', 'prefix')]"
+              :target="props.prefixIcon"
+              tag="label"
+              :for="props.id"
+              @mousedown.prevent
+      ></p-icon>
+
+      <!-- 原生 input 元素 -->
+      <input ref="inner" :class="ns.e('inner')"
+             :type="props.type"
+             :id="props.id"
+             :maxlength="props.maxLength"
+             :minlength="props.minLength"
+             :placeholder="props.placeholder"
+             :disabled="props.disabled"
+             :readonly="props.readonly"
+             :autofocus="props.autofocus"
+             @input="handleInput"
+             @focus="handleFocus"
+             @blur="handleBlur"
+             @compositionstart="handleCompositionStart"
+             @compositionend="handleCompositionEnd"
+      >
+
+      <!-- 后缀图标：显示在输入框内容右侧 -->
+      <p-icon :class="[ns.e('icon'), ns.em('icon', 'suffix')]"
+              :target="props.suffixIcon"
+              :tag="'label'"
+              :for="props.id"
+              @mousedown.prevent
+      ></p-icon>
+
+      <!-- 字数统计图标：显示当前输入字符数和最大限制 -->
+      <label :class="[ns.e('icon'), ns.em('icon', 'limit')]" v-if="showWordLimit"
+             :data-overflow="getValueLength() > (props.maxLength as number)"
+      >
+        <!-- 超出长度时显示警告图标 -->
+        <p-icon target="warning" v-if="getValueLength() > (props.maxLength as number)"></p-icon>
+        {{ getValueLength() }}
+        <template v-if="props.maxLength">/{{ props.maxLength }}</template>
+      </label>
+
+      <!-- 清空按钮：点击清空输入框内容 -->
+      <p-icon v-if="showCloseIcon"
+              :class="[ns.e('icon'), ns.em('icon', 'clear')]"
+              target="remove"
+              @click="onClear"
+              tabindex="0"
+              @mousedown.prevent
+      ></p-icon>
+
+      <!-- 密码显示切换按钮：切换密码的可见性 -->
+      <p-icon v-if="showEyeIcon"
+              :class="[ns.e('icon'), ns.em('icon', 'switch')]"
+              target="eye"
+              @click="handleEyeIconClick"
+              tabindex="0"
+              @mousedown.prevent
+      ></p-icon>
+    </div>
+
+    <!-- 后置插槽：用于在输入框后面添加自定义内容，如按钮、标签等 -->
+    <div v-if="$slots.suffixSlot"
+         :class="[ns.e('slot'), ns.em('slot', 'suffix')]">
+      <slot name="suffixSlot"></slot>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, onMounted, Ref, ref, watch } from "vue";
+import PIcon from "../../icon/src/icon.vue";
+import { PInputEmits, PInputProps } from "./input";
+import useAlert from "@bin-ui/hooks/useAlert";
+import { useNS } from "@bin-ui/hooks";
+import { unrefElement } from "@vueuse/core";
+import { delay } from "@bin-ui/tools";
+
+/**
+ * 组件配置
+ * @property {string} name - 组件名称
+ * @property {boolean} inheritAttrs - 禁用属性继承，手动控制属性绑定
+ */
+defineOptions({
+  name: "PInput",
+  inheritAttrs: false
+})
+
+/** BEM 命名空间工具 */
+const ns = useNS('input');
+
+/** 组件属性 */
+const props = defineProps({...PInputProps});
+
+/** 组件事件 */
+const emits = defineEmits<PInputEmits>();
+
+/**
+ * 计算输入框容器的 CSS 类名
+ * @returns {Array<string>} 类名数组
+ */
+const inputCls = computed(() => {
+  return [
+    ns.namespace,                    // 'p-input'
+    ns.m(props.size),                // 'p-input--small' 或 'p-input--large'
+    ns.is(props.disabled, 'disabled') // 'is-disabled'
+  ]
+})
+
+/** 输入框容器元素引用 */
+const container = ref<HTMLElement | null>(null);
+
+/** 原生 input 元素引用 */
+const inner: Ref<HTMLInputElement | undefined> = ref(undefined);
+
+/** 输入框包装器元素引用 */
+const wrapper = ref<HTMLElement | null>(null);
+
+/**
+ * 使用 Alert 提示功能
+ * @description 用于在输入框验证失败时显示错误提示
+ */
+const {
+  icon: alertIcon,
+  text: alertText,
+  show: alertShow,
+  hidden: alertHidden,
+  toggle: alertToggle
+} = useAlert(wrapper);
+
+/**
+ * 标志是否正在组合中文输入
+ * @description 用于处理中文输入法的问题，避免拼音输入过程中触发 input 事件
+ */
+const composing: Ref<Boolean> = ref(false);
+
+/**
+ * 标志输入框的值是否合法
+ * @description 根据 minLength, maxLength 和 checkFunc 进行验证
+ */
+const isLegal = ref<boolean | undefined>(true);
+
+/**
+ * 显示警告提示
+ * @param {string} [text] - 提示文本
+ * @param {string} [icon] - 提示图标
+ */
+const alert = function (text?: string, icon?: string) {
+  alertText.value = text;
+  alertIcon.value = icon;
+  alertShow();
+}
+
+/**
+ * 计算是否显示密码切换图标
+ * @returns {Boolean} 是否显示
+ * @description 只有在密码类型、有值、未禁用时才显示
+ */
+const showEyeIcon = computed((): Boolean => {
+  if (props.modelValue == undefined || props.modelValue === '') return false
+  return props.showPassword && props.type === 'password' && !props.disabled
+})
+
+/**
+ * 计算是否显示清空图标
+ * @returns {Boolean} 是否显示
+ * @description 只有在可清空、有值、非只读、未禁用时才显示
+ */
+const showCloseIcon = computed((): Boolean => {
+  if (props.modelValue == undefined || props.modelValue === '') return false
+  return props.clearable && !props.readonly && !props.disabled
+})
+
+// 监听绑定值变化
+watch(() => props.modelValue, (value) => {
+  unrefElement(inner)!.value = value ? value.toString() : '';
+
+  if (value !== undefined) {
+    emits("change", value.toString());
+  }
+
+  isLegal.value = true;
+  alertHidden();
+
+  if (props.minLength !== undefined) {
+    isLegal.value &&= (getValueLength() >= Number.parseInt(props.minLength as string))
+  }
+  if (props.maxLength !== undefined) {
+    isLegal.value &&= (getValueLength() <= Number.parseInt(props.maxLength as string));
+  }
+})
+
+// 处理输入事件
+const handleInput = function () {
+  if (props.readonly || props.disabled || composing.value) return
+
+  const input = unrefElement(inner)!
+  emits("update:modelValue", input.value);
+  input.value = (props.modelValue == undefined) ? '' : String(props.modelValue);
+  emits('input', input.value);
+}
+
+// 处理失去焦点事件
+const handleBlur = function (event: FocusEvent) {
+  alertHidden();
+  props.checkFunc && (isLegal.value = props.checkFunc(props.modelValue as string, alert));
+  emits("blur", event);
+}
+
+// 处理获取焦点事件
+const handleFocus = function (event: FocusEvent) {
+  emits('focus', event);
+}
+
+// 清空输入框
+const onClear = function () {
+  const input = unrefElement(inner)!;
+  emits("update:modelValue", '');
+  emits('clear');
+  input.focus();
+}
+
+// 处理密码显示切换
+const handleEyeIconClick = async function () {
+  const input = unrefElement(inner) as HTMLInputElement;
+  if (input.type === 'password') {
+    input.type = 'text';
+  } else input.type = 'password';
+
+  await delay();
+  input.setSelectionRange(input.value.length, input.value.length);
+}
+
+// 处理中文输入开始事件
+const handleCompositionStart = function () {
+  composing.value = true;
+}
+
+// 处理中文输入结束事件
+const handleCompositionEnd = function () {
+  const input = unrefElement(inner) as HTMLInputElement;
+  composing.value = false;
+  emits("update:modelValue", input.value);
+  emits('input', input.value);
+}
+
+// 获取绑定值的字符串长度
+const getValueLength = () => {
+  return (props.modelValue == undefined) ? 0 : String(props.modelValue).length;
+}
+
+// 组件挂载时的初始化逻辑
+onMounted(() => {
+  unrefElement(inner)!.value = (props.modelValue == undefined) ? '' : String(props.modelValue);
+  
+  if (props.minLength !== undefined) {
+    isLegal.value &&= (getValueLength() >= Number.parseInt(props.minLength as string))
+  }
+  if (props.maxLength !== undefined) {
+    isLegal.value &&= (getValueLength() <= Number.parseInt(props.maxLength as string));
+  }
+})
+
+// 暴露给父组件的方法和属性
+defineExpose({
+  isLegal,
+  alert,
+  showAlert: alertShow,
+  hiddenAlert: alertHidden,
+  toggleAlert: alertToggle,
+  clear: onClear,
+  focus: () => unrefElement(inner)!.focus(),
+  blur: () => unrefElement(inner)!.blur(),
+  select: () => unrefElement(inner)!.select(),
+})
+
+</script>
+
+

package/packages/components/installer.ts

@@ -0,0 +1,69 @@
+/*
+ * @description: UI 组件注册
+ * @author: MC.Yang
+ */
+import {App} from "vue";
+import {Partial} from "./abstract";
+// 基础组件
+import {Button} from "./button";
+import {Icon} from "./icon";
+import {Link} from "./link";
+import {Floating} from "./floating";
+import {Scrollbar} from "./scrollbar";
+// 布局组件
+import {Col, Row} from "./grid";
+import {Divider} from "./divider";
+import {Aside, Content, Footer, Header, Layout} from "./layout";
+// 导航组件
+import {Dropdown, DropdownItem} from "./dropdown";
+import {HeadMenu, MendItem, Menu, Submenu} from "./menu";
+import {TabPanel, Tabs} from "./tabs";
+// 消息提醒组件
+import {MessageBox} from "./message";
+import {Dialog} from "./dialog";
+import {Drawer} from "./drawer";
+import {Popconfirm} from "./popconfirm";
+// 数据展示组件
+import {Tooltip} from "./tooltip";
+import {Badge} from "./badge";
+import {Tag} from "./tag";
+// 数据输入组件
+import {Input} from "./input";
+import {Switch} from "./switch";
+
+const comps = {
+    // 抽象组件
+    Partial,
+    // 基础组件
+    Button,
+    Icon,
+    Link,
+    Floating,
+    Scrollbar,
+    // 布局组件
+    Row, Col,
+    Divider,
+    Layout, Header, Content, Footer, Aside,
+    // 导航组件
+    Dropdown, DropdownItem,
+    Menu, HeadMenu, MendItem, Submenu,
+    Tabs, TabPanel,
+    // 消息提醒组件
+    MessageBox,
+    Dialog,
+    Drawer,
+    Popconfirm,
+    // 数据展示组件
+    Tooltip,
+    Badge,
+    Tag,
+    // 数据输入组件
+    Input,
+    Switch,
+}
+
+export default function (vue: App) {
+    Object.values(comps).forEach(comp => {
+        vue.use(comp);
+    });
+}

package/packages/components/layout/index.ts

@@ -0,0 +1,26 @@
+/*
+ * @description: 布局
+ * @author: MC.Yang
+ */
+import _Layout from "./src/layout.vue";
+import _Header from "./src/header.vue";
+import _Content from "./src/content.vue";
+import _Footer from "./src/footer.vue";
+import _Aside from "./src/aside.vue";
+import {withInstall} from "@bin-ui/tools";
+
+const Layout = withInstall(_Layout);
+const Header = withInstall(_Header);
+const Content = withInstall(_Content);
+const Footer = withInstall(_Footer);
+const Aside = withInstall(_Aside);
+
+export default {Layout}
+
+export {
+    Layout,
+    Header,
+    Content,
+    Footer,
+    Aside
+}

package/packages/components/layout/src/aside.ts

@@ -0,0 +1,19 @@
+/*
+ * @description: 布局 Aside
+ * @author: MC.Yang
+ */
+
+/**
+ * 布局 Aside Props
+ */
+export const PAsideProps = {
+
+    /**
+     * @description: 侧边栏宽度。样式表（class）中定义的默认宽度为：232px
+     */
+    width: {
+        type: String,
+        default: '',
+    },
+
+}

package/packages/components/layout/src/aside.vue

@@ -0,0 +1,35 @@
+<template>
+  <aside :class="ns.e('aside')" :style="style">
+    <slot></slot>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import {computed, inject, onMounted, onUnmounted} from "vue";
+import {LayoutProvideType} from "./layout.vue";
+import {useNS} from "@bin-ui/hooks";
+import {PAsideProps} from "./aside";
+
+defineOptions({
+  name: "PAside",
+  inheritAttrs: false
+})
+
+const ns = useNS('layout');
+const props = defineProps({...PAsideProps});
+const { hasSide } = inject<LayoutProvideType>('layout', Object.create(null));
+
+const style = computed(() => {
+  return {
+    width: props.width ? props.width : '',
+  }
+})
+
+onMounted(() => {
+  hasSide.value = true;
+});
+
+onUnmounted(() => {
+  hasSide.value = false;
+});
+</script>

package/packages/components/layout/src/content.ts

@@ -0,0 +1,11 @@
+/*
+ * @description: 布局 Content
+ * @author: MC.Yang
+ */
+
+/**
+ * 布局 Content Props
+ */
+export const PContentProps = {
+
+}

package/packages/components/layout/src/content.vue

@@ -0,0 +1,18 @@
+<template>
+  <main :class="ns.e('content')">
+    <slot></slot>
+  </main>
+</template>
+
+<script setup lang="ts">
+
+import {useNS} from "@bin-ui/hooks";
+
+defineOptions({
+  name: "PContent",
+  inheritAttrs: false
+})
+
+const ns = useNS('layout');
+
+</script>

package/packages/components/layout/src/footer.ts

@@ -0,0 +1,19 @@
+/*
+ * @description: 布局 Footer
+ * @author: MC.Yang
+ */
+
+/**
+ * 布局 Footer Props
+ */
+export const PFooterProps = {
+
+    /**
+     * @description: 底栏高度。样式表（class）中定义的默认高度为：24px
+     */
+    height: {
+        type: String,
+        default: '',
+    },
+
+}

package/packages/components/layout/src/footer.vue

@@ -0,0 +1,26 @@
+<template>
+  <footer :class="ns.e('footer')" :style="style">
+    <slot></slot>
+  </footer>
+</template>
+
+<script setup lang="ts">
+import {computed} from "vue";
+import {useNS} from "@bin-ui/hooks";
+import {PFooterProps} from "./footer";
+
+defineOptions({
+  name: "PFooter",
+  inheritAttrs: false
+})
+
+const ns = useNS('layout');
+const props = defineProps({...PFooterProps});
+
+const style = computed(() => {
+  return {
+    width: props.height ? props.height : '',
+  }
+})
+
+</script>

package/packages/components/layout/src/header.ts

@@ -0,0 +1,19 @@
+/*
+ * @description: 布局 Header
+ * @author: MC.Yang
+ */
+
+/**
+ * 布局 Header Props
+ */
+export const PHeaderProps = {
+
+    /**
+     * @description: 顶栏高度。样式表（class）中定义的默认高度为：64px
+     */
+    height: {
+        type: String,
+        default: '',
+    },
+
+}