adata-ui 2.1.40-beta.16 → 2.1.40-beta.18

package/components/elements/a-select-row/index.vue

@@ -1,138 +1,140 @@
-<script setup lang="ts">
-import { twMerge } from '#adata-ui/utils/twMerge'
-import {isEqual} from 'lodash-es'
-import AChips from '~/components/elements/chips/AChips.vue'
-
-type Item = {
-  id: number | string
-  name: string
-}
-
-interface Props {
-  clearable?: boolean
-  disabled?: boolean
-  deletable?: boolean
-  label: string
-  selectedItems: Item[]
-  btnClass?: string
-}
-
-type Emits = {
-  (e: 'delete', item: Item): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  clearable: true,
-  disabled: false,
-  label: 'select',
-  deletable: false,
-  btnClass: '',
-})
-const items = computed(() => {
-  return props.selectedItems
-})
-const emits = defineEmits<Emits>()
-const disabledStyles =
-  'disabled:pointer-events-none disabled:opacity-40 disabled:bg-deepblue-50 disabled:text-deepblue-200 disabled:dark:text-gray-500'
-const isOpen = defineModel<boolean>('isOpen')
-
-const minWidthOfChip = 100
-const buttonElement = ref()
-const buttonWidth = computed(() => buttonElement.value?.offsetWidth - 50)
-const itemsCount = computed(() => {
-  return items.value.length
-})
-const maxWidthOfChip = computed(() => {
-  if (itemsCount.value) {
-    const width = (itemsCount.value <= 5 ? buttonWidth.value - itemsCount.value*8 : buttonWidth.value) / itemsCount.value
-    if (width < minWidthOfChip) {
-      return minWidthOfChip
-    }
-    return width
-  }
-  return 'auto'
-})
-
-const countOfVisibleItems = computed(() => {
-  if (!items.value?.length) return undefined
-  const maxCountOfVisibleItems = Math.floor((buttonElement.value?.offsetWidth - 50) / 120)
-  if (maxCountOfVisibleItems > items.value.length) return items.value.length
-    else if (maxCountOfVisibleItems < 0) return 4
-  else return maxCountOfVisibleItems
-})
-const visibleItems = computed(() => {
-  if (!items.value.length && !countOfVisibleItems) return undefined
-  return items.value.slice(0, countOfVisibleItems.value)
-})
-const countOfUnvisibleItems = computed(() => {
-  if (!items.value?.length && !countOfVisibleItems.value) return undefined
-  return items.value.length - countOfVisibleItems.value
-})
-const deleteItem = (item: Item) => {
-  emits('delete', item)
-  items.value = items.value?.filter((el) => !isEqual(el, item))
-}
-const onClear = () => {
-  items.value.length = 0
-}
-</script>
-<template>
-  <div>
-    <button
-      ref="buttonElement"
-      class="hover:border-blue focus-visible:outline-blue
-      relative flex w-full items-center justify-between gap-2 rounded-sm
-      border border-solid border-deepblue-50 bg-deepblue-50 min-h-[40px] text-gray-500 body-400 px-4 py-1.5
-      focus-visible:shadow-[0_0_0_4px#1B64B3] dark:border-gray-900 dark:bg-gray-200/5
-      dark:hover:border-blue-700"
-      :class="twMerge(disabledStyles, props.btnClass)"
-      :disabled="disabled"
-      @click="isOpen = !isOpen"
-    >
-      <div>
-        <div
-          v-if="visibleItems && visibleItems.length"
-          class="flex gap-2"
-        >
-          <a-chips
-            v-for="item in visibleItems"
-            :key="item.id"
-            size="md"
-            class="text-deepblue-900 dark:text-gray-200 border-gray-500"
-            :style="{ 'max-width': maxWidthOfChip + 'px' }"
-          >
-            <span class="truncate">{{ item.name }}</span>
-            <button
-              v-if="deletable"
-              class="rounded-full bg-deepblue-100 dark:bg-gray-200/10"
-              @click.stop="deleteItem(item)"
-            >
-              <a-icon-x-mark class="size-3 dark:text-gray-300" />
-            </button>
-          </a-chips>
-          <a-chips
-            v-if="countOfUnvisibleItems"
-            class="text-blue-700 dark:text-blue-500 border-blue-700 dark:border-blue-500 whitespace-nowrap"
-            size="md"
-          >
-            + {{ countOfUnvisibleItems }}
-          </a-chips>
-        </div>
-        <div v-else>
-          {{ label }}
-        </div>
-      </div>
-      <!--      <button-->
-      <!--        v-if="visibleItems && countOfVisibleItems && clearable"-->
-      <!--        class="absolute right-10 top-1/2 -translate-y-1/2 rounded-full bg-deepblue-100 dark:bg-gray-200/10"-->
-      <!--        @click.stop="onClear"-->
-      <!--      >-->
-      <!--        <a-icon-chevron-down class="!m-0 text-base dark:text-gray-300"/>-->
-      <!--      </button>-->
-      <a-icon-chevron-down
-        class="!m-0 min-w-4 transition-all text-deepblue-900 dark:text-gray-500"
-        :class="{ '-rotate-90': !isOpen }"
-      />
-    </button>
-  </div>
-</template>
+<script setup lang="ts">
+import AChips from '~/components/elements/chips/AChips.vue'
+import {isEqual} from 'lodash-es'
+import { twMerge } from 'tailwind-merge'
+
+type Item = {
+  id: number | string
+  name: string
+}
+
+interface Props {
+  clearable?: boolean
+  disabled?: boolean
+  deletable?: boolean
+  label: string
+  selectedItems: Item[]
+  btnClass?: string
+}
+
+// const items = defineModel<Item[]>('selectedItems', {required: true})
+
+type Emits = {
+  (e: 'delete', item: Item): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  clearable: true,
+  disabled: false,
+  label: 'select',
+  deletable: false,
+  btnClass: '',
+})
+const items = computed(() => {
+  return props.selectedItems
+})
+const emits = defineEmits<Emits>()
+const disabledStyles =
+  'disabled:pointer-events-none disabled:opacity-40 disabled:bg-deepblue-50 disabled:text-deepblue-200 disabled:dark:text-gray-500'
+const isOpen = defineModel<boolean>('isOpen')
+
+const minWidthOfChip = 100
+const buttonElement = ref()
+const buttonWidth = computed(() => buttonElement.value?.offsetWidth - 50)
+const itemsCount = computed(() => {
+  return items.value.length
+})
+const maxWidthOfChip = computed(() => {
+  if (itemsCount.value) {
+    const width = (itemsCount.value <= 5 ? buttonWidth.value - itemsCount.value*8 : buttonWidth.value) / itemsCount.value
+    if (width < minWidthOfChip) {
+      return minWidthOfChip
+    }
+    return width
+  }
+  return 'auto'
+})
+
+const countOfVisibleItems = computed(() => {
+  if (!items.value?.length) return undefined
+  const maxCountOfVisibleItems = Math.floor((buttonElement.value?.offsetWidth - 50) / 120)
+  if (maxCountOfVisibleItems > items.value.length) return items.value.length
+    else if (maxCountOfVisibleItems < 0) return 4
+  else return maxCountOfVisibleItems
+})
+const visibleItems = computed(() => {
+  if (!items.value.length && !countOfVisibleItems) return undefined
+  return items.value.slice(0, countOfVisibleItems.value)
+})
+const countOfUnvisibleItems = computed(() => {
+  if (!items.value?.length && !countOfVisibleItems.value) return undefined
+  return items.value.length - countOfVisibleItems.value
+})
+const deleteItem = (item: Item) => {
+  emits('delete', item)
+  items.value = items.value?.filter((el) => !isEqual(el, item))
+}
+const onClear = () => {
+  items.value.length = 0
+}
+</script>
+<template>
+  <div>
+    <button
+      ref="buttonElement"
+      class="hover:border-blue focus-visible:outline-blue
+      relative flex w-full items-center justify-between gap-2 rounded-md
+      border border-solid border-deepblue-50 bg-deepblue-50 min-h-[40px] text-gray-500 body-400 px-4 py-1.5
+      focus-visible:shadow-[0_0_0_4px#1B64B3] dark:border-gray-900 dark:bg-gray-200/5
+      dark:hover:border-blue-700"
+      :class="twMerge(disabledStyles, props.btnClass)"
+      :disabled="disabled"
+      @click="isOpen = !isOpen"
+    >
+      <div>
+        <div
+          v-if="visibleItems && visibleItems.length"
+          class="flex gap-2"
+        >
+          <a-chips
+            v-for="item in visibleItems"
+            :key="item.id"
+            size="md"
+            class="text-deepblue-900 dark:text-gray-200 border-gray-500"
+            :style="{ 'max-width': maxWidthOfChip + 'px' }"
+          >
+            <span class="truncate">{{ item.name }}</span>
+            <button
+              v-if="deletable"
+              class="rounded-full bg-deepblue-100 dark:bg-gray-200/10"
+              @click.stop="deleteItem(item)"
+            >
+              <a-icon-x-mark class="size-3 dark:text-gray-300" />
+            </button>
+          </a-chips>
+          <a-chips
+            v-if="countOfUnvisibleItems"
+            class="text-blue-700 dark:text-blue-500 border-blue-700 dark:border-blue-500 whitespace-nowrap"
+            size="md"
+          >
+            + {{ countOfUnvisibleItems }}
+          </a-chips>
+        </div>
+        <div v-else>
+          {{ label }}
+        </div>
+      </div>
+      <!--      <button-->
+      <!--        v-if="visibleItems && countOfVisibleItems && clearable"-->
+      <!--        class="absolute right-10 top-1/2 -translate-y-1/2 rounded-full bg-deepblue-100 dark:bg-gray-200/10"-->
+      <!--        @click.stop="onClear"-->
+      <!--      >-->
+      <!--        <a-icon-chevron-down class="!m-0 text-base dark:text-gray-300"/>-->
+      <!--      </button>-->
+      <a-icon-chevron-down
+        class="!m-0 min-w-4 transition-all text-deepblue-900 dark:text-gray-500"
+        :class="{ '-rotate-90': !isOpen }"
+      />
+    </button>
+  </div>
+</template>