init

.svn/pristine/46/462e58f898285cf65f41a5ed3bbc7ca099281f3b.svn-base

@@ -0,0 +1,20 @@
+<script lang="ts">
+export default {
+  name: "UsernameIcon",
+};
+</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-username"
+  />
+</template>

.svn/pristine/46/467d6b46f880c9fd3d106a743916b1d0d15ca444.svn-base

@@ -0,0 +1,16 @@
+<script lang="ts">
+export default {
+  name: "LoadingIcon",
+};
+</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-loading" />
+</template>

.svn/pristine/46/46a32da56a547af46eea3b01194d7d9def152b87.svn-base

@@ -0,0 +1,217 @@
+<script lang="ts">
+export default {
+  name: "LayIconPicker",
+};
+</script>
+
+<script setup lang="ts">
+import "./index.less";
+import { computed, Ref, ref, StyleValue } from "vue";
+import { LayIconList as icons } from "@layui/icons-vue";
+import LayDropdown from "../dropdown/index.vue";
+import LayInput from "../input/index.vue";
+import LayScroll from "../scroll/index.vue";
+
+export interface IconPickerProps {
+  page?: boolean;
+  modelValue?: string;
+  disabled?: boolean;
+  showSearch?: boolean;
+  contentClass?: string | Array<string | object> | object;
+  contentStyle?: StyleValue;
+}
+
+const props = withDefaults(defineProps<IconPickerProps>(), {
+  modelValue: "layui-icon-face-smile",
+  disabled: false,
+  page: false,
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+const selectedIcon = computed(() => props.modelValue);
+const dropdownRef = ref<any>(null);
+
+const selectIcon = function (icon: string): void {
+  emit("update:modelValue", icon);
+  emit("change", icon);
+  dropdownRef.value?.hide();
+};
+
+const icones: Ref = ref([]);
+const total: Ref<number> = ref(icons.length);
+const totalPage: Ref<number> = ref(total.value / 12);
+const currentPage: Ref<number> = ref(1);
+
+if (props.page) {
+  icones.value = icons.slice(0, 12);
+} else {
+  icones.value = icons;
+}
+
+const next = () => {
+  if (currentPage.value === totalPage.value) {
+    return;
+  }
+  currentPage.value = currentPage.value + 1;
+  const start = (currentPage.value - 1) * 12;
+  const end = start + 12;
+  icones.value = icons.slice(start, end);
+};
+
+const prev = () => {
+  if (currentPage.value === 1) {
+    return;
+  }
+  currentPage.value = currentPage.value - 1;
+  const start = (currentPage.value - 1) * 12;
+  const end = start + 12;
+  icones.value = icons.slice(start, end);
+};
+
+const clear = () => {
+  const start = (currentPage.value - 1) * 12;
+  const end = start + 12;
+  if (props.page) {
+    icones.value = icons.slice(start, end);
+    total.value = icons.length;
+    totalPage.value = Math.ceil(icons.length / 12);
+  } else {
+    icones.value = icons;
+  }
+};
+
+const search = (e: any) => {
+  currentPage.value = 1;
+  const start = (currentPage.value - 1) * 12;
+  const end = start + 12;
+  const text = e;
+  if (text) {
+    if (props.page) {
+      icones.value = searchList(text, icons).slice(start, end);
+      total.value = searchList(text, icons).length;
+      totalPage.value = Math.ceil(searchList(text, icons).length / 12);
+    } else {
+      icones.value = searchList(text, icons);
+    }
+  } else {
+    if (props.page) {
+      icones.value = icons.slice(start, end);
+      total.value = icons.length;
+      totalPage.value = Math.ceil(icons.length / 12);
+    } else {
+      icones.value = icons;
+    }
+  }
+};
+
+const searchList = (str: string, container: any) => {
+  var newList = [];
+  var startChar = str.charAt(0);
+  var strLen = str.length;
+  for (var i = 0; i < container.length; i++) {
+    var obj = container[i];
+    var isMatch = false;
+    for (var p in obj) {
+      if (typeof obj[p] == "function") {
+        obj[p]();
+      } else {
+        var curItem = "";
+        if (obj[p] != null) {
+          curItem = obj[p];
+        }
+        for (var j = 0; j < curItem.length; j++) {
+          if (curItem.charAt(j) == startChar) {
+            if (curItem.substring(j).substring(0, strLen) == str) {
+              isMatch = true;
+              break;
+            }
+          }
+        }
+      }
+    }
+    if (isMatch) {
+      newList.push(obj);
+    }
+  }
+  return newList;
+};
+</script>
+
+<template>
+  <lay-dropdown
+    ref="dropdownRef"
+    :disabled="disabled"
+    :contentClass="contentClass"
+    :contentStyle="contentStyle"
+    updateAtScroll
+  >
+    <div
+      class="layui-inline layui-border-box layui-iconpicker layui-iconpicker-split"
+      :class="[{ 'layui-colorpicker-disabled': disabled }]"
+    >
+      <div class="layui-inline layui-iconpicker-main">
+        <i class="layui-inline layui-icon" :class="[selectedIcon]"></i>
+      </div>
+      <span class="layui-inline layui-iconpicker-suffix"
+        ><i class="layui-icon layui-icon-down layui-anim"></i
+      ></span>
+    </div>
+    <template #content>
+      <div class="layui-iconpicker-view layui-iconpicker-scroll">
+        <div v-if="showSearch" class="layui-iconpicker-search">
+          <lay-input
+            @input="search"
+            @clear="clear"
+            autocomplete="true"
+            :allow-clear="true"
+          >
+            <template #prefix>
+              <i class="layui-icon layui-icon-search"></i>
+            </template>
+          </lay-input>
+        </div>
+        <div class="layui-iconpicker-list">
+          <lay-scroll style="height: 200px" thumbColor="rgb(238, 238, 238)">
+            <ul>
+              <li
+                v-for="icon in icones"
+                :key="icon"
+                :class="[selectedIcon === icon.class ? 'layui-this' : '']"
+                @click="selectIcon(icon.class)"
+              >
+                <i class="layui-icon" :class="[icon.class]"></i>
+                <p class="layui-elip">
+                  {{ icon.name }}
+                </p>
+              </li>
+            </ul>
+          </lay-scroll>
+        </div>
+        <div v-if="page" class="layui-iconpicker-page">
+          <div id="layui-laypage-1" class="layui-laypage layui-laypage-default">
+            <span class="layui-laypage-count">共 {{ total }} 个</span
+            ><a
+              href="javascript:;"
+              class="layui-laypage-prev"
+              :class="[currentPage === 1 ? 'layui-disabled' : '']"
+              @click="prev()"
+              ><i class="layui-icon layui-icon-left"></i></a
+            ><span class="layui-laypage-curr"
+              ><em class="layui-laypage-em"></em
+              ><em>{{ currentPage }} / {{ totalPage }}</em></span
+            ><span class="layui-laypage-spr">…</span
+            ><a href="javascript:;" class="layui-laypage-last" title="尾页"
+              >14</a
+            ><a
+              href="javascript:;"
+              :class="[currentPage === totalPage ? 'layui-disabled' : '']"
+              class="layui-laypage-next"
+              @click="next()"
+              ><i class="layui-icon layui-icon-right"></i
+            ></a>
+          </div>
+        </div>
+      </div>
+    </template>
+  </lay-dropdown>
+</template>