init

.svn/pristine/7f/7f22fd6dcf0f42f3c6a1a20e1a778546fec5791e.svn-base

@@ -0,0 +1,20 @@
+<script lang="ts">
+export default {
+  name: "PictureFineIcon",
+};
+</script>
+<script setup lang="ts">
+import LayIcon from "../component/icon/index";
+
+const props = defineProps<{
+  color?: string;
+  size?: string;
+}>();
+</script>
+<template>
+  <lay-icon
+    :color="props.color"
+    :size="props.size"
+    type="layui-icon-picture-fine"
+  />
+</template>

.svn/pristine/7f/7f8198fd550f683c84d4efa6eb9fa99a2adeb942.svn-base

@@ -0,0 +1,153 @@
+<script lang="ts">
+export default {
+  name: "LayTreeSelect",
+};
+</script>
+
+<script lang="ts" setup>
+import "./index.less";
+import { computed, ref, watch } from "vue";
+import { getNode } from "../../utils/treeUtil";
+import { TreeSelectSize } from "./interface";
+
+export interface TreeSelectProps {
+  data: any;
+  modelValue: any;
+  disabled?: boolean;
+  placeholder?: string;
+  multiple?: boolean;
+  allowClear?: boolean;
+  collapseTagsTooltip?: boolean;
+  minCollapsedNum?: number;
+  size?: TreeSelectSize;
+  checkStrictly?: boolean;
+}
+
+export interface TreeSelectEmits {
+  (e: "update:modelValue", value: string): void;
+  (e: "change", value: string): void;
+  (e: "search", value: string): void;
+}
+
+const props = withDefaults(defineProps<TreeSelectProps>(), {
+  disabled: false,
+  placeholder: "请选择",
+  multiple: false,
+  allowClear: false,
+  collapseTagsTooltip: true,
+  minCollapsedNum: 3,
+  checkStrictly: true,
+  size: "md",
+});
+
+const singleValue = ref();
+const multipleValue = ref(["1"]);
+const openState = ref(false);
+const dropdownRef = ref();
+const emits = defineEmits<TreeSelectEmits>();
+
+const selectedValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emits("update:modelValue", value);
+    emits("change", value);
+  },
+});
+
+const checkedKeys = computed({
+  get() {
+    return props.multiple ? props.modelValue : [];
+  },
+  set(value) {
+    if (props.multiple) {
+      emits("update:modelValue", value);
+      emits("change", value);
+    }
+  },
+});
+
+watch(
+  selectedValue,
+  () => {
+    if (props.multiple) {
+      multipleValue.value = selectedValue.value.map((value: any) => {
+        const node: any = getNode(props.data, value);
+        node.label = node.title;
+        node.closable = !node.disabled;
+        return node;
+      });
+    } else {
+      const node: any = getNode(props.data, selectedValue.value);
+      if (node) {
+        singleValue.value = node.title;
+      }
+    }
+  },
+  { immediate: true, deep: true }
+);
+
+const handleClick = (node: any) => {
+  dropdownRef.value.hide();
+  selectedValue.value = node.id;
+};
+</script>
+
+<template>
+  <div class="layui-tree-select" :class="{ 'layui-disabled': disabled }">
+    <lay-dropdown
+      ref="dropdownRef"
+      :disabled="disabled"
+      :update-at-scroll="true"
+      @show="openState = true"
+      @hide="openState = false"
+    >
+      <lay-tag-input
+        :size="size"
+        :allow-clear="allowClear"
+        :placeholder="placeholder"
+        :collapseTagsTooltip="collapseTagsTooltip"
+        :minCollapsedNum="minCollapsedNum"
+        :disabledInput="true"
+        v-model="multipleValue"
+        v-if="multiple"
+      >
+        <template #suffix>
+          <lay-icon
+            type="layui-icon-triangle-d"
+            :class="{ triangle: openState }"
+          ></lay-icon>
+        </template>
+      </lay-tag-input>
+      <lay-input
+        v-else
+        v-model="singleValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :readonly="true"
+        :size="size"
+      >
+        <template #suffix>
+          <lay-icon
+            type="layui-icon-triangle-d"
+            :class="{ triangle: openState }"
+          ></lay-icon>
+        </template>
+      </lay-input>
+      <template #content>
+        <div class="layui-tree-select-content">
+          <lay-tree
+            :data="data"
+            :onlyIconControl="true"
+            :show-checkbox="multiple"
+            :check-strictly="checkStrictly"
+            v-model:selectedKey="selectedValue"
+            v-model:checkedKeys="checkedKeys"
+            @node-click="handleClick"
+          ></lay-tree>
+        </div>
+      </template>
+    </lay-dropdown>
+  </div>
+</template>

.svn/pristine/7f/7fb5ccaac7bbbbbb74124eefacba4b18dd7bad79.svn-base

@@ -0,0 +1 @@
+.layui-switch-container[size=lg] .layui-form-switch{height:24px;min-width:42px}.layui-switch-container[size=lg] .layui-form-switch span{width:20px;height:20px;transition:all .1s linear}.layui-switch-container[size=lg] .layui-form-switch em{margin-left:21px}.layui-switch-container[size=lg] .layui-form-onswitch span{left:calc(100% - 23px)}.layui-switch-container[size=lg] .layui-form-onswitch em{margin-right:21px;margin-left:0}.layui-switch-container[size=md] .layui-form-switch{height:22px;min-width:37px}.layui-switch-container[size=md] .layui-form-switch span{width:18px;height:18px;transition:all .1s linear}.layui-switch-container[size=md] .layui-form-switch em{margin-left:19px}.layui-switch-container[size=md] .layui-form-onswitch span{left:calc(100% - 21px)}.layui-switch-container[size=md] .layui-form-onswitch em{margin-right:19px;margin-left:0}.layui-switch-container[size=sm] .layui-form-switch{height:20px;min-width:32px}.layui-switch-container[size=sm] .layui-form-switch span{width:16px;height:16px;transition:all .1s linear}.layui-switch-container[size=sm] .layui-form-switch em{margin-left:17px}.layui-switch-container[size=sm] .layui-form-onswitch span{left:calc(100% - 19px)}.layui-switch-container[size=sm] .layui-form-onswitch em{margin-right:17px;margin-left:0}.layui-switch-container[size=xs] .layui-form-switch{height:18px;min-width:27px}.layui-switch-container[size=xs] .layui-form-switch span{width:14px;height:14px;transition:all .1s linear}.layui-switch-container[size=xs] .layui-form-switch em{margin-left:15px}.layui-switch-container[size=xs] .layui-form-onswitch span{left:calc(100% - 17px)}.layui-switch-container[size=xs] .layui-form-onswitch em{margin-right:15px;margin-left:0}.layui-switch-container .layui-switch-input{display:none}.layui-form-switch{position:relative;height:22px;line-height:22px;min-width:35px;padding:0 4px;border-radius:20px;cursor:pointer;background-color:var(--global-neutral-color-6);-webkit-transition:all .1s linear;transition:all .1s linear}.layui-form-switch span{position:absolute;display:flex;align-items:center;justify-content:center;left:3px;top:2px;width:18px;height:18px;line-height:18px;border-radius:20px;background-color:#fff;box-shadow:0 2px 4px #00230b33;-webkit-transition:all .1s linear;transition:all .1s linear}.layui-form-switch em{position:relative;padding:0 2px;text-align:center!important;color:#999!important;font-style:normal!important;font-size:12px;width:25px;top:0}.layui-form-onswitch{border-color:var(--global-checked-color);background-color:var(--global-checked-color)}.layui-form-onswitch span{background-color:#fff}.layui-form-onswitch em{color:#fff!important}.layui-switch-disabled{opacity:.6}.layui-switch-disabled,.layui-switch-disabled *{cursor:not-allowed!important}