init

.svn/pristine/30/30411971aae6956b4442be8c1814bdff25c2136a.svn-base

@@ -0,0 +1,4 @@
+import { LayIcon as Component } from "@layui/icons-vue";
+import { WithInstallType } from "../../utils";
+declare const component: WithInstallType<typeof Component>;
+export default component;

.svn/pristine/30/3098a7ce2c06eaee0332c3c730ed6c59393a3011.svn-base

@@ -0,0 +1 @@
+import "vue";

.svn/pristine/30/30fb9ea86e925f23764cd05dfb1e25a5abac82fb.svn-base

@@ -0,0 +1,311 @@
+<template>
+  <div
+    :size="size"
+    :class="[
+      'layui-cascader',
+      {
+        'layui-cascader-opend': openState,
+        'layui-cascader-disabled': disabled,
+      },
+    ]"
+  >
+    <lay-dropdown
+      ref="dropdownRef"
+      :trigger="trigger"
+      :autoFitMinWidth="false"
+      :updateAtScroll="true"
+      :disabled="disabled"
+      :contentClass="contentClass"
+      :contentStyle="contentStyle"
+      @show="openState = true"
+      @hide="openState = false"
+    >
+      <lay-input
+        v-if="!slots.default"
+        v-model="displayValue"
+        suffix-icon="layui-icon-triangle-d"
+        :placeholder="placeholder"
+        :allow-clear="allowClear"
+        :disabled="disabled"
+        :readonly="true"
+        :size="size"
+        @clear="onClear"
+      ></lay-input>
+      <slot v-else></slot>
+
+      <template #content>
+        <div class="layui-cascader-panel">
+          <template v-for="(itemCol, index) in treeData">
+            <lay-scroll
+              height="180px"
+              class="layui-cascader-menu"
+              :key="'cascader-menu' + index"
+              v-if="itemCol.data.length"
+            >
+              <div
+                class="layui-cascader-menu-item"
+                v-for="(item, i) in itemCol.data"
+                :key="index + i"
+                @click="selectBar(item, i, index)"
+                :class="[
+                  {
+                    'layui-cascader-selected': itemCol.selectIndex === i,
+                  },
+                ]"
+              >
+                <slot
+                  :name="item.slot"
+                  v-if="item.slot && slots[item.slot]"
+                ></slot>
+                <template v-else>{{ item.label }}</template>
+                <i
+                  class="layui-icon layui-icon-right"
+                  v-if="item.children && item.children.length"
+                ></i>
+              </div>
+            </lay-scroll>
+          </template>
+        </div>
+      </template>
+    </lay-dropdown>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "LayCascader",
+};
+</script>
+
+<script setup lang="ts">
+import "./index.less";
+import LayInput from "../input/index.vue";
+import LayScroll from "../scroll/index.vue";
+import LayDropdown from "../dropdown/index.vue";
+import { ref, onMounted, watch, useSlots, StyleValue } from "vue";
+import { CascaderSize } from "./interface";
+
+export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";
+
+export interface CascaderProps {
+  options?: Array<any> | null;
+  modelValue?: string;
+  decollator?: string;
+  placeholder?: string;
+  onlyLastLevel?: boolean;
+  disabled?: boolean;
+  replaceFields?: { label: string; value: string; children: string };
+  allowClear?: boolean;
+  size?: CascaderSize;
+  trigger?: DropdownTrigger | DropdownTrigger[];
+  contentClass?: string | Array<string | object> | object;
+  contentStyle?: StyleValue;
+}
+
+const props = withDefaults(defineProps<CascaderProps>(), {
+  options: null,
+  modelValue: "",
+  decollator: "/",
+  placeholder: "",
+  onlyLastLevel: false,
+  allowClear: false,
+  disabled: false,
+  size: "md",
+  trigger: "click",
+  replaceFields: () => {
+    return {
+      label: "label",
+      value: "value",
+      children: "children",
+    };
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "change", "clear"]);
+
+onMounted(() => {
+  initTreeData();
+});
+
+watch(
+  () => props.options,
+  () => {
+    initTreeData();
+  }
+);
+
+watch(
+  () => props.modelValue,
+  () => {
+    if (props.modelValue === null || props.modelValue === "") {
+      onClear();
+    }
+  }
+);
+
+const treeData = ref<any>([]);
+const initTreeData = () => {
+  let treeLvNum = getMaxFloor(props.options);
+  for (let index = 0; index < treeLvNum; index++) {
+    if (index == 0) {
+      treeData.value[0] = {
+        selectIndex: null,
+        data: findData(props.options, 1),
+      };
+    } else {
+      treeData.value[index] = {
+        selectIndex: null,
+        data: [],
+      };
+    }
+  }
+  if (props.modelValue) {
+    try {
+      let valueData = props.modelValue.split(props.decollator);
+      let data: any[] = [];
+      for (let index = 0; index < treeData.value.length; index++) {
+        const element = treeData.value[index];
+        const nowValue = valueData[index];
+        for (let i = 0; i < element.length; i++) {
+          const ele = element[i];
+          if (nowValue === ele.value) {
+            data.push(ele);
+            element.selectIndex = i;
+          }
+        }
+      }
+      displayValue.value = data
+        .map((e) => {
+          return e.label;
+        })
+        .join(` ${props.decollator} `);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+};
+
+function getMaxFloor(treeData: any) {
+  //let floor = 0;
+  let max = 0;
+  function each(data: any, floor: any) {
+    data.forEach((e: any) => {
+      //e.layFloor = floor;
+      if (floor > max) {
+        max = floor;
+      }
+      if (
+        e[props.replaceFields.children] &&
+        e[props.replaceFields.children].length > 0
+      ) {
+        each(e[props.replaceFields.children], floor + 1);
+      }
+    });
+  }
+  each(treeData, 1);
+  return max;
+}
+function findData(orginData: any, level: number) {
+  let data: any[] = [];
+  for (let i = 0; i < orginData.length; i++) {
+    const element = orginData[i];
+    if (level === 1) {
+      data.push({
+        value: element[props.replaceFields.value],
+        label: element[props.replaceFields.label],
+        slot: element.slot || false,
+        children: element[props.replaceFields.children] ?? false,
+        orginData: element,
+      });
+    }
+
+    if (
+      level !== 1 &&
+      element[props.replaceFields.children] &&
+      element[props.replaceFields.children].length > 0
+    ) {
+      findData(element[props.replaceFields.children], level - 1);
+    }
+  }
+  return data;
+}
+
+const dataContainer = ref<any>([]);
+const selectBar = (item: any, selectIndex: number, parentIndex: number) => {
+  treeData.value[parentIndex].selectIndex = selectIndex;
+  if (item.children && item.children.length > 0) {
+    treeData.value[parentIndex + 1].selectIndex = null;
+    treeData.value[parentIndex + 1].data = findData(item.children, 1);
+  }
+  //把数组里后面的数据清空
+  let nextIndex = parentIndex + 2;
+  for (let index = nextIndex; index < treeData.value.length; index++) {
+    treeData.value[index].selectIndex = null;
+    treeData.value[index].data = [];
+  }
+  if (!item.children || item.children.length === 0) {
+    //输入框数据更新
+    let data: any[] = [];
+    function extractData(orginData: any, dataContainer: any, index: number) {
+      const element = orginData[index].data;
+      const selectIndex = orginData[index].selectIndex;
+      const selectData = element[selectIndex];
+      dataContainer.push(selectData);
+      if (selectData.children && selectData.children.length > 0) {
+        extractData(orginData, dataContainer, index + 1);
+      }
+    }
+    extractData(treeData.value, data, 0);
+    let fullLable = data
+      .map((e: any) => {
+        return e.label;
+      })
+      .join(` ${props.decollator} `);
+    if (!props.onlyLastLevel) {
+      displayValue.value = fullLable;
+    } else {
+      let _data = data.map((e: any) => {
+        return e.label;
+      });
+      displayValue.value = _data[_data.length - 1];
+    }
+    let value = data
+      .map((e: any) => {
+        return e.value;
+      })
+      .join(props.decollator);
+    emit("update:modelValue", value);
+    let evt = {
+      display: displayValue.value,
+      value: value,
+      label: fullLable,
+      currentClick: JSON.parse(JSON.stringify(item.orginData)),
+    };
+    emit("change", evt);
+    if (dropdownRef.value)
+      // @ts-ignore
+      dropdownRef.value.hide();
+  }
+};
+
+const displayValue = ref<string | number>("");
+const slots = useSlots();
+const dropdownRef = ref();
+
+//清除事件
+const onClear = () => {
+  displayValue.value = "";
+  let arr = JSON.parse(JSON.stringify(treeData.value));
+  for (let index = 0; index < arr.length; index++) {
+    arr[index].selectIndex = null;
+    if (index === 0) {
+      continue;
+    }
+    arr[index].data = [];
+  }
+  treeData.value = arr;
+  emit("update:modelValue", null);
+};
+
+const openState = ref(false);
+</script>

.svn/pristine/30/30fe1bc213c0bc43db6e1760863289291e3e9b96.svn-base

@@ -0,0 +1,97 @@
+<script lang="ts">
+export default {
+  name: "LaySwitch",
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import "./index.less";
+import { SwitchSize } from "./interface";
+
+export interface SwitchProps {
+  name?: string;
+  disabled?: boolean;
+  modelValue?: string | number | boolean;
+  onswitchText?: string;
+  unswitchText?: string;
+  onswitchColor?: string;
+  unswitchColor?: string;
+  onswitchValue?: string | number | boolean;
+  unswitchValue?: string | number | boolean;
+  size?: SwitchSize;
+  loadingIcon?: string;
+  loading?: boolean;
+}
+
+const props = withDefaults(defineProps<SwitchProps>(), {
+  disabled: false,
+  onswitchValue: true,
+  unswitchValue: false,
+  loadingIcon: "layui-icon-loading-one",
+  size: "md",
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const isActive = computed({
+  get() {
+    return props.modelValue === props.onswitchValue;
+  },
+  set(val) {
+    if (val) {
+      emit("change", props.onswitchValue);
+      emit("update:modelValue", props.onswitchValue);
+    } else {
+      emit("change", props.unswitchValue);
+      emit("update:modelValue", props.unswitchValue);
+    }
+  },
+});
+
+const handleClick = () => {
+  if (!props.disabled) {
+    isActive.value = !isActive.value;
+  }
+};
+
+const styles = computed(() => {
+  return {
+    "background-color": isActive.value
+      ? props.onswitchColor
+      : props.unswitchColor,
+  };
+});
+</script>
+
+<template>
+  <span @click.stop="handleClick" class="layui-switch-container" :size="size">
+    <input class="layui-switch-input" :name="name" :value="modelValue" />
+    <div
+      class="layui-unselect layui-form-switch"
+      :style="styles"
+      :class="{
+        'layui-form-onswitch': isActive,
+        'layui-switch-disabled': disabled,
+      }"
+    >
+      <em v-if="onswitchText || unswitchText">{{
+        isActive == true ? onswitchText : unswitchText
+      }}</em>
+      <span>
+        <div>
+          <template v-if="loading">
+            <i
+              class="layui-icon layui-anim layui-anim-rotate layui-anim-loop"
+              :class="loadingIcon"
+            ></i>
+          </template>
+          <template v-else>
+            <slot v-if="isActive" name="onswitch-icon"></slot>
+            <slot v-else name="unswitch-icon"></slot>
+          </template>
+        </div>
+      </span>
+    </div>
+  </span>
+</template>