@unsource/ui 2.9.38 → 2.9.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,3 +1,3 @@
1
- {
2
- "eslint.experimental.useFlatConfig": true
3
- }
1
+ {
2
+ "eslint.experimental.useFlatConfig": true
3
+ }
package/README.md CHANGED
@@ -1,84 +1,84 @@
1
- <!--
2
- Get your module up and running quickly.
3
-
4
- Find and replace all on all files (CMD+SHIFT+F):
5
- - Name: My Module
6
- - Package name: my-module
7
- - Description: My new Nuxt module
8
- -->
9
-
10
- # My Module
11
-
12
- [![npm version][npm-version-src]][npm-version-href]
13
- [![npm downloads][npm-downloads-src]][npm-downloads-href]
14
- [![License][license-src]][license-href]
15
- [![Nuxt][nuxt-src]][nuxt-href]
16
-
17
- My new Nuxt module for doing amazing things.
18
-
19
- - [✨ &nbsp;Release Notes](/CHANGELOG.md)
20
- <!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
21
- <!-- - [📖 &nbsp;Documentation](https://example.com) -->
22
-
23
- ## Features
24
-
25
- <!-- Highlight some of the features your module provide here -->
26
- - ⛰ &nbsp;Foo
27
- - 🚠 &nbsp;Bar
28
- - 🌲 &nbsp;Baz
29
-
30
- ## Quick Setup
31
-
32
- Install the module to your Nuxt application with one command:
33
-
34
- ```bash
35
- npx nuxi module add my-module
36
- ```
37
-
38
- That's it! You can now use My Module in your Nuxt app ✨
39
-
40
-
41
- ## Contribution
42
-
43
- <details>
44
- <summary>Local development</summary>
45
-
46
- ```bash
47
- # Install dependencies
48
- npm install
49
-
50
- # Generate type stubs
51
- npm run dev:prepare
52
-
53
- # Develop with the playground
54
- npm run dev
55
-
56
- # Build the playground
57
- npm run dev:build
58
-
59
- # Run ESLint
60
- npm run lint
61
-
62
- # Run Vitest
63
- npm run test
64
- npm run test:watch
65
-
66
- # Release new version
67
- npm run release
68
- ```
69
-
70
- </details>
71
-
72
-
73
- <!-- Badges -->
74
- [npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
75
- [npm-version-href]: https://npmjs.com/package/my-module
76
-
77
- [npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
78
- [npm-downloads-href]: https://npm.chart.dev/my-module
79
-
80
- [license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
81
- [license-href]: https://npmjs.com/package/my-module
82
-
83
- [nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
84
- [nuxt-href]: https://nuxt.com
1
+ <!--
2
+ Get your module up and running quickly.
3
+
4
+ Find and replace all on all files (CMD+SHIFT+F):
5
+ - Name: My Module
6
+ - Package name: my-module
7
+ - Description: My new Nuxt module
8
+ -->
9
+
10
+ # My Module
11
+
12
+ [![npm version][npm-version-src]][npm-version-href]
13
+ [![npm downloads][npm-downloads-src]][npm-downloads-href]
14
+ [![License][license-src]][license-href]
15
+ [![Nuxt][nuxt-src]][nuxt-href]
16
+
17
+ My new Nuxt module for doing amazing things.
18
+
19
+ - [✨ &nbsp;Release Notes](/CHANGELOG.md)
20
+ <!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
21
+ <!-- - [📖 &nbsp;Documentation](https://example.com) -->
22
+
23
+ ## Features
24
+
25
+ <!-- Highlight some of the features your module provide here -->
26
+ - ⛰ &nbsp;Foo
27
+ - 🚠 &nbsp;Bar
28
+ - 🌲 &nbsp;Baz
29
+
30
+ ## Quick Setup
31
+
32
+ Install the module to your Nuxt application with one command:
33
+
34
+ ```bash
35
+ npx nuxi module add my-module
36
+ ```
37
+
38
+ That's it! You can now use My Module in your Nuxt app ✨
39
+
40
+
41
+ ## Contribution
42
+
43
+ <details>
44
+ <summary>Local development</summary>
45
+
46
+ ```bash
47
+ # Install dependencies
48
+ npm install
49
+
50
+ # Generate type stubs
51
+ npm run dev:prepare
52
+
53
+ # Develop with the playground
54
+ npm run dev
55
+
56
+ # Build the playground
57
+ npm run dev:build
58
+
59
+ # Run ESLint
60
+ npm run lint
61
+
62
+ # Run Vitest
63
+ npm run test
64
+ npm run test:watch
65
+
66
+ # Release new version
67
+ npm run release
68
+ ```
69
+
70
+ </details>
71
+
72
+
73
+ <!-- Badges -->
74
+ [npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
75
+ [npm-version-href]: https://npmjs.com/package/my-module
76
+
77
+ [npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
78
+ [npm-downloads-href]: https://npm.chart.dev/my-module
79
+
80
+ [license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
81
+ [license-href]: https://npmjs.com/package/my-module
82
+
83
+ [nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
84
+ [nuxt-href]: https://nuxt.com
package/dist/module.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "unsource-ui",
3
3
  "configKey": "unsourceUi",
4
- "version": "2.9.38",
4
+ "version": "2.9.40",
5
5
  "builder": {
6
6
  "@nuxt/module-builder": "1.0.2",
7
7
  "unbuild": "3.6.1"
@@ -1,28 +1,28 @@
1
1
  <template>
2
- <div
3
- class="flex flex-col p-3 bg-white rounded-2xl gap-4"
4
- >
5
- <div
6
- :class="customClass?.header"
7
- class="cursor-pointer flex items-center justify-between"
8
- @click="show = !show"
9
- >
10
- <UnCard
11
- :item="{ avatar: icon, title, tags, description }"
12
- :class="customClass.card"
13
- :custom-class="customClass.cardInside"
14
- />
15
- <UnNuxtIcon
16
- :class="customClass?.collapsibleIcon"
17
- :name="collapsibleIcon || 'solar:alt-arrow-down-bold-duotone'"
18
- class="transition-all duration-300"
19
- :style="{ rotate: show && !noRotate ? '180deg' : '0deg' }"
20
- />
21
- </div>
22
- <template v-if="show">
23
- <slot />
24
- </template>
25
- </div>
2
+ <div
3
+ class="flex flex-col p-3 bg-white rounded-2xl gap-4"
4
+ >
5
+ <div
6
+ :class="customClass?.header"
7
+ class="cursor-pointer flex items-center justify-between"
8
+ @click="show = !show"
9
+ >
10
+ <UnCard
11
+ :item="{ avatar: icon, title, tags, description }"
12
+ :class="customClass.card"
13
+ :custom-class="customClass.cardInside"
14
+ />
15
+ <UnNuxtIcon
16
+ :class="customClass?.collapsibleIcon"
17
+ :name="collapsibleIcon || 'solar:alt-arrow-down-bold-duotone'"
18
+ class="transition-all duration-300"
19
+ :style="{ rotate: show && !noRotate ? '180deg' : '0deg' }"
20
+ />
21
+ </div>
22
+ <template v-if="show">
23
+ <slot />
24
+ </template>
25
+ </div>
26
26
  </template>
27
27
 
28
28
  <script setup>
@@ -1,30 +1,30 @@
1
1
  <template>
2
- <div
3
- class="flex flex-col p-3 bg-white rounded-2xl gap-4"
4
- >
5
- <div
6
- v-if="title || $slots.default"
7
- :class="customClass?.header"
8
- class="flex items-center justify-between"
9
- >
10
- <h3
11
- v-if="title"
12
- :class="customClass?.title"
13
- class="text-(lg gray-600) font-semibold"
14
- >
15
- {{ title }}
16
- </h3>
17
- <slot />
18
- </div>
19
- <UnCard
20
- v-for="(item, index) in items"
21
- :key="index"
22
- :class="customClass.items"
23
- :custom-class="customClass.item"
24
- :item="item"
25
- :to="to?.(item)"
26
- />
27
- </div>
2
+ <div
3
+ class="flex flex-col p-3 bg-white rounded-2xl gap-4"
4
+ >
5
+ <div
6
+ v-if="title || $slots.default"
7
+ :class="customClass?.header"
8
+ class="flex items-center justify-between"
9
+ >
10
+ <h3
11
+ v-if="title"
12
+ :class="customClass?.title"
13
+ class="text-(lg gray-600) font-semibold"
14
+ >
15
+ {{ title }}
16
+ </h3>
17
+ <slot />
18
+ </div>
19
+ <UnCard
20
+ v-for="(item, index) in items"
21
+ :key="index"
22
+ :class="customClass.items"
23
+ :custom-class="customClass.item"
24
+ :item="item"
25
+ :to="to?.(item)"
26
+ />
27
+ </div>
28
28
  </template>
29
29
 
30
30
  <script setup>
@@ -1,52 +1,52 @@
1
1
  <template>
2
- <div class="grow flex flex-col gap-3">
3
- <div class="flex flex-col items-stretch gap-3 grow-1 p-4">
4
- <UnCard
5
- v-for="(item, index) in items.filter((e) => !e.disable)"
6
- :key="index"
2
+ <div class="grow flex flex-col gap-3">
3
+ <div class="flex flex-col items-stretch gap-3 grow-1 p-4">
4
+ <UnCard
5
+ v-for="(item, index) in items.filter((e) => !e.disable)"
6
+ :key="index"
7
7
  :custom-class="_mergeWith(customClass.item, {
8
8
  logo: '!w-8 !h-8 !border-none !rounded-0',
9
9
  body: '!items-center'
10
- }, merge)"
11
- :class="customClass.items"
12
- :to="item.to"
13
- :item="item"
14
- @click="item.handler?.()"
15
- >
16
- <template #header>
17
- <UnNuxtIcon
18
- :class="customClass.appendIcon"
19
- :name="item.appendIcon || 'solar:alt-arrow-left-line-duotone'"
20
- class="text-sm"
21
- />
22
- </template>
23
- </UnCard>
24
- </div>
25
- <div class="grow" />
26
- <div class="flex flex-col gap-2 text-sm text-center self-stretch">
27
- <slot>
28
- <NuxtLink
29
- v-if="developer"
30
- :to="developerLink || '#'"
31
- target="_blank"
32
- class="flex justify-center gap-1 self-center"
33
- >طراحی و توسعه توسط <span class="text-blue-6 font-bold">{{ developer }}</span>
34
- <UnNuxtIcon
35
- v-if="developerIcon"
36
- :name="developerIcon"
37
- class="!text-xl"
38
- />
39
- </NuxtLink>
40
- <p v-if="owner">
41
- کلیه حقوق مادی و معنوی این نرم‌افزار متعلق به شرکت <span class="text-primary-500 font-bold">{{ owner }}</span>
42
- می‌باشد.
43
- </p>
44
- <p v-if="version">
45
- V{{ version }}
46
- </p>
47
- </slot>
48
- </div>
49
- </div>
10
+ }, merge)"
11
+ :class="customClass.items"
12
+ :to="item.to"
13
+ :item="item"
14
+ @click="item.handler?.()"
15
+ >
16
+ <template #header>
17
+ <UnNuxtIcon
18
+ :class="customClass.appendIcon"
19
+ :name="item.appendIcon || 'solar:alt-arrow-left-line-duotone'"
20
+ class="text-sm"
21
+ />
22
+ </template>
23
+ </UnCard>
24
+ </div>
25
+ <div class="grow" />
26
+ <div class="flex flex-col gap-2 text-sm text-center self-stretch">
27
+ <slot>
28
+ <NuxtLink
29
+ v-if="developer"
30
+ :to="developerLink || '#'"
31
+ target="_blank"
32
+ class="flex justify-center gap-1 self-center"
33
+ >طراحی و توسعه توسط <span class="text-blue-6 font-bold">{{ developer }}</span>
34
+ <UnNuxtIcon
35
+ v-if="developerIcon"
36
+ :name="developerIcon"
37
+ class="!text-xl"
38
+ />
39
+ </NuxtLink>
40
+ <p v-if="owner">
41
+ کلیه حقوق مادی و معنوی این نرم‌افزار متعلق به شرکت <span class="text-primary-500 font-bold">{{ owner }}</span>
42
+ می‌باشد.
43
+ </p>
44
+ <p v-if="version">
45
+ V{{ version }}
46
+ </p>
47
+ </slot>
48
+ </div>
49
+ </div>
50
50
  </template>
51
51
 
52
52
  <script setup>
@@ -1,28 +1,28 @@
1
1
  <template>
2
- <div
3
- class="relative select-none group px-4 py-3 flex flex-row items-center gap-3 transition duration-300 hover:bg-primary-500/10 border-0 min-w-fit"
4
- :class="{ 'opacity-50 grayscale': disabled, 'disable': disabled, 'selected': selected }"
5
- @click.prevent.stop="toggle"
6
- >
7
- <div
8
- name="radio"
9
- :class="customClass.radio"
10
- class="group-[.disable]:border-secondary border-(1 solid primary) rounded-1/2 w-4 h-4 flex justify-center items-center"
11
- >
12
- <div
13
- name="radioInside"
14
- class="bg-primary-500 rounded-1/2 h-10px w-10px transition-opacity duration-200"
15
- :class="[customClass.radioInside, selected ? 'opacity-full' : 'opacity-0']"
16
- />
17
- </div>
18
- <UnCard
19
- :item="item"
20
- class="!bg-transparent grow-1"
21
- :class="customClass.card"
22
- :custom-class="customClass.item"
23
- :info-icon="infoIcon"
24
- />
25
- </div>
2
+ <div
3
+ class="relative select-none group px-4 py-3 flex flex-row items-center gap-3 transition duration-300 hover:bg-primary-500/10 border-0 min-w-fit"
4
+ :class="{ 'opacity-50 grayscale': disabled, 'disable': disabled, 'selected': selected }"
5
+ @click.prevent.stop="toggle"
6
+ >
7
+ <div
8
+ name="radio"
9
+ :class="customClass.radio"
10
+ class="group-[.disable]:border-secondary border-(1 solid primary) rounded-1/2 w-4 h-4 flex justify-center items-center"
11
+ >
12
+ <div
13
+ name="radioInside"
14
+ class="bg-primary-500 rounded-1/2 h-10px w-10px transition-opacity duration-200"
15
+ :class="[customClass.radioInside, selected ? 'opacity-full' : 'opacity-0']"
16
+ />
17
+ </div>
18
+ <UnCard
19
+ :item="item"
20
+ class="!bg-transparent grow-1"
21
+ :class="customClass.card"
22
+ :custom-class="customClass.item"
23
+ :info-icon="infoIcon"
24
+ />
25
+ </div>
26
26
  </template>
27
27
 
28
28
  <script setup>
@@ -1,117 +1,118 @@
1
1
  <template>
2
- <div
3
- ref="wrapper"
4
- class="cursor-pointer relative"
5
- >
6
- <div
7
- v-if="!inline"
8
- :id
9
- name="header"
10
- :class="customClass.header"
11
- class="bg-white h-12 rounded-2xl flex flex-row gap-1 items-center px-2 py-1 cursor-pointer text-black-1 relative"
12
- @click="!readonly && !inline ? toggle() : ''"
13
- >
14
- <UnNuxtIcon
15
- v-if="icon"
16
- :name="icon"
17
- :class="customClass.icon"
18
- class="text-xl"
19
- />
20
- <p
21
- name="label"
22
- :class="customClass.label"
23
- class="flex-grow text-sm select-none whitespace-nowrap"
24
- >
25
- {{
26
- (multi && isArray(value) && !value?.length || isNil(value) ? placeholder : multi ? value.map((v) => Label(IsSelected(v))?.title).join(", ") : Label(Selected)?.title) || placeholder
27
- }}
28
- </p>
29
- <UnNuxtIcon
30
- name="iconsax:arrow-down-bold"
31
- class="transform transition-transform duration-300 text-xl"
32
- :class="[customClass.arrowIcon, { 'rotate-180': show }]"
33
- />
34
- </div>
35
- <Teleport
36
- v-if="show && !readonly || inline"
37
- :disabled="inline"
38
- to="body"
39
- >
40
- <div
41
- v-on-click-outside="close"
42
- name="wrapper"
43
- :style="!isMobile && !inline && dropdownStyles"
44
- class="z-1000 md:mt-3 rounded-2xl w-full min-w-fit text-base flex flex-col items-stretch overflow-y-auto scrollbar-thin"
2
+ <div
3
+ ref="wrapper"
4
+ class="cursor-pointer relative"
5
+ >
6
+ <div
7
+ v-if="!inline"
8
+ :id
9
+ name="header"
10
+ :class="customClass.header"
11
+ class="bg-white h-12 rounded-2xl flex flex-row gap-1 items-center px-2 py-1 cursor-pointer text-black-1 relative"
12
+ @click="!readonly && !inline ? toggle() : ''"
13
+ >
14
+ <UnNuxtIcon
15
+ v-if="icon"
16
+ :name="icon"
17
+ :class="customClass.icon"
18
+ class="text-xl"
19
+ />
20
+ <p
21
+ name="label"
22
+ :class="customClass.label"
23
+ class="flex-grow text-sm select-none whitespace-nowrap"
24
+ >
25
+ {{
26
+ (multi && isArray(value) && !value?.length || isNil(value) ? placeholder : multi ? value.map((v) => Label(IsSelected(v))?.title).join(", ") : Label(Selected)?.title) || placeholder
27
+ }}
28
+ </p>
29
+ <UnNuxtIcon
30
+ name="iconsax:arrow-down-bold"
31
+ class="transform transition-transform duration-300 text-xl"
32
+ :class="[customClass.arrowIcon, { 'rotate-180': show }]"
33
+ />
34
+ </div>
35
+ <Teleport
36
+ :disabled="inline"
37
+ to="body"
38
+ >
39
+ <div
40
+ v-show="show && !readonly || inline"
41
+ v-on-click-outside="close"
42
+ name="wrapper"
43
+ ref="list"
44
+ :style="!isMobile && !inline && dropdownStyles"
45
+ class="z-1000 md:mt-3 rounded-2xl w-auto <md:w-full min-w-fit text-base flex flex-col items-stretch overflow-y-auto scrollbar-thin"
45
46
  :class="[
46
47
  customClass.wrapper,
47
48
  inline ? 'relative' : 'absolute <md:(bg-black/10 fixed inset-0 backdrop-blur-xs justify-end)',
48
49
  light ? 'bg-white' : 'bg-border',
49
50
  inline ? '' : Searchable ? 'md:max-h-230px' : 'md:max-h-160px'
50
- ]"
51
- >
52
- <div
53
- name="innerWrapper"
54
- :class="customClass.innerWrapper"
55
- class="flex flex-col items-stretch min-w-fit <md:(max-h-80dvh bg-white border-(1 solid primary) rounded-t-2xl pb-24)"
56
- >
57
- <UnSearch
58
- v-if="Searchable"
59
- v-model="search"
60
- name="search"
61
- :class="customClass.search"
62
- class="h-10"
63
- placeholder="جستجو..."
64
- />
65
- <div
66
- name="list"
67
- :class="customClass.list"
68
- class="min-w-fit divide-(y dashed border) flex flex-col items-stretch overflow-y-auto scrollbar-width-thin !children:b-x-0"
69
- >
70
- <template v-if="multi">
71
- <UnCheckboxItem
72
- v-for="option in searchedOptions"
73
- :key="Value(option)"
74
- :value="Value(option)"
75
- :item="Label(option)"
76
- :class="customClass.checkbox"
77
- :custom-class="customClass.checkboxItem"
78
- :selected="value?.includes?.(Value(option))"
79
- :disabled="option.disable"
80
- @click="handleSelect(option)"
81
- />
82
- <UnButton
83
- v-if="!inline"
84
- variant="primary-fill"
85
- label="تایید"
86
- class="m-2"
87
- :class="customClass.checkboxButton"
88
- @click="close"
89
- />
90
- </template>
91
- <template v-else>
92
- <UnRadioItem
93
- v-for="option in searchedOptions"
94
- :key="Value(option)"
95
- :value="Value(option)"
96
- :item="Label(option)"
97
- :class="customClass.radio"
98
- :custom-class="customClass.radioItem"
99
- :selected="isEqual(Value(option), value)"
100
- :disabled="option.disable"
101
- class="!min-w-60"
102
- @click="handleSelect(option)"
103
- />
104
- </template>
105
- </div>
106
- </div>
107
- </div>
108
- </Teleport>
109
- </div>
51
+ ]"
52
+ >
53
+ <div
54
+ name="innerWrapper"
55
+ :class="customClass.innerWrapper"
56
+ class="flex flex-col items-stretch min-w-fit <md:(max-h-80dvh bg-white border-(1 solid primary) rounded-t-2xl pb-24)"
57
+ >
58
+ <UnSearch
59
+ v-if="Searchable"
60
+ v-model="search"
61
+ name="search"
62
+ :class="customClass.search"
63
+ class="h-10"
64
+ placeholder="جستجو..."
65
+ />
66
+ <div
67
+ name="list"
68
+ :class="customClass.list"
69
+ class="min-w-fit divide-(y dashed border) flex flex-col items-stretch overflow-y-auto scrollbar-width-thin !children:b-x-0"
70
+ >
71
+ <template v-if="multi">
72
+ <UnCheckboxItem
73
+ v-for="option in searchedOptions"
74
+ :key="Value(option)"
75
+ :value="Value(option)"
76
+ :item="Label(option)"
77
+ :class="customClass.checkbox"
78
+ :custom-class="customClass.checkboxItem"
79
+ :selected="value?.includes?.(Value(option))"
80
+ :disabled="option.disable"
81
+ @click="handleSelect(option)"
82
+ />
83
+ <UnButton
84
+ v-if="!inline"
85
+ variant="primary-fill"
86
+ label="تایید"
87
+ class="m-2"
88
+ :class="customClass.checkboxButton"
89
+ @click="close"
90
+ />
91
+ </template>
92
+ <template v-else>
93
+ <UnRadioItem
94
+ v-for="option in searchedOptions"
95
+ :key="Value(option)"
96
+ :value="Value(option)"
97
+ :item="Label(option)"
98
+ :class="customClass.radio"
99
+ :custom-class="customClass.radioItem"
100
+ :selected="isEqual(Value(option), value)"
101
+ :disabled="option.disable"
102
+ class="!min-w-60"
103
+ @click="handleSelect(option)"
104
+ />
105
+ </template>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </Teleport>
110
+ </div>
110
111
  </template>
111
112
 
112
113
  <script setup>
113
114
  import { vOnClickOutside } from "@vueuse/components";
114
- import { _get, computed, isArray, isEqual, isNil, nextTick, ref, useDevice, useId, watch } from "#imports";
115
+ import { _get, computed, isArray, isEqual, isNil, nextTick, ref, useDevice, useId, useTemplateRef, watch } from "#imports";
115
116
  const { isMobile } = useDevice();
116
117
  const { valueKey, items, multi, searchable, customClass = {} } = defineProps({
117
118
  placeholder: { type: String, required: false },
@@ -166,14 +167,19 @@ const handleSelect = (data) => {
166
167
  value.value = items2;
167
168
  };
168
169
  const wrapper = ref(null);
170
+ const list = useTemplateRef("list");
169
171
  const updateDropdownPosition = () => {
170
172
  if (!wrapper.value) return;
173
+ if (!list.value) return;
171
174
  const rect = wrapper.value.getBoundingClientRect();
175
+ const mainRect = list.value.getBoundingClientRect();
176
+ console.log(mainRect, rect, window.scrollY, window.innerWidth, window.innerHeight);
172
177
  dropdownStyles.value = {
173
- position: "absolute",
174
- top: `${rect.bottom + window.scrollY}px`,
175
- right: `${window.innerWidth - rect.right}px`,
176
- width: `${rect.width}px`,
178
+ // position: 'absolute',
179
+ top: mainRect.height > window.innerHeight - rect.bottom ? "auto" : `${rect.bottom + window.scrollY}px`,
180
+ bottom: mainRect.height > window.innerHeight - rect.bottom ? `${window.innerHeight - rect.top - window.scrollY + 5}px` : "auto",
181
+ right: mainRect.width > rect.right ? `${window.innerWidth - mainRect.width - 5}px` : `${window.innerWidth - rect.right}px`,
182
+ // width: `${rect.width}px`,
177
183
  zIndex: "1000"
178
184
  };
179
185
  };
@@ -1,79 +1,79 @@
1
1
  <template>
2
- <tr
3
- class="children:p-3 <md:children:p-1 text-center border-b-(2 solid border) hover:bg-primary-500/10"
4
- :class="[trClass?.(item, items), { '!bg-primary-500/20': selected?.[idKey] === item[idKey] }]"
2
+ <tr
3
+ class="children:p-3 <md:children:p-1 text-center border-b-(2 solid border) hover:bg-primary-500/10"
4
+ :class="[trClass?.(item, items), { '!bg-primary-500/20': selected?.[idKey] === item[idKey] }]"
5
5
  @click="$emit('click:row', item);
6
- selected = item"
7
- @dbclick="$emit('dbclick:row', item)"
8
- >
9
- <td
10
- v-if="parentKey"
11
- class="!max-w-1 !w-1"
12
- :style="{ paddingInlineStart: level * 10 + 5 + 'px' }"
13
- >
14
- <UnNuxtIcon
15
- v-if="subItems?.length"
16
- class="cursor-pointer w-5 h-5"
17
- :name="open ? 'solar:folder-open-broken' : 'solar:add-folder-broken'"
18
- @click="open = !open"
19
- />
20
- </td>
21
- <td
22
- v-for="col in cols.filter((e) => !e.disabled)"
23
- :key="col.name + '-td'"
24
- class="text-gray-400 text-sm text-center first:rounded-l-lg last:rounded-r-lg"
25
- :style="{ paddingInlineStart: parentKey ? level * 10 + 5 + 'px' : 'unset' }"
26
- :class="[col.classHandler?.(item, col, items, cols), col.class, { '<md:hidden': col.isDesktop, 'hidden <md:table-cell': col.isMobile }, tdClass]"
27
- :dir="col.dir"
28
- >
29
- <slot
30
- :name="col.name"
31
- :col="col"
32
- :item="item"
33
- :items="_at(item, col.key)"
34
- :index="col.name + '-slot'"
35
- >
36
- <div class="flex flex-col gap-0.5">
37
- <p :class="textClass">
38
- {{ col.handler ? col.handler(_at(item, col.key), item, col, items, cols) : _at(item, col.key).join(" ") }}
39
- </p>
40
- <small
41
- v-if="col.subKey?.length"
42
- class="font-500 text-gray-600 text-xs"
43
- >{{ _at(item, col.subKey).join(" ") }}</small>
44
- </div>
45
- </slot>
46
- </td>
47
- <td
48
- v-if="parentKey"
49
- class="!max-w-1 !w-1 !p-1"
50
- >
51
- <UnNuxtIcon
52
- class="cursor-pointer w-5 h-5"
53
- name="solar:add-circle-broken"
54
- @click="$emit('add:row', item)"
55
- />
56
- </td>
57
- </tr>
58
- <template v-if="parentKey && subItems?.length && open">
59
- <UnTableRow
60
- v-for="(i, index) in subItems"
61
- :key="index"
62
- v-model="selected"
63
- :item="i"
64
- :items
65
- :cols
66
- :parent-key
67
- :level="level + 1"
68
- :id-key
69
- :text-class
70
- :td-class
71
- :tr-class
72
- @click:row="$emit('click:row', i)"
73
- @dbclick:row="$emit('dbclick:row', i)"
74
- @add:row="$emit('add:row', i)"
75
- />
76
- </template>
6
+ selected = item"
7
+ @dbclick="$emit('dbclick:row', item)"
8
+ >
9
+ <td
10
+ v-if="parentKey"
11
+ class="!max-w-1 !w-1"
12
+ :style="{ paddingInlineStart: level * 10 + 5 + 'px' }"
13
+ >
14
+ <UnNuxtIcon
15
+ v-if="subItems?.length"
16
+ class="cursor-pointer w-5 h-5"
17
+ :name="open ? 'solar:folder-open-broken' : 'solar:add-folder-broken'"
18
+ @click="open = !open"
19
+ />
20
+ </td>
21
+ <td
22
+ v-for="col in cols.filter((e) => !e.disabled)"
23
+ :key="col.name + '-td'"
24
+ class="text-gray-400 text-sm text-center first:rounded-l-lg last:rounded-r-lg"
25
+ :style="{ paddingInlineStart: parentKey ? level * 10 + 5 + 'px' : 'unset' }"
26
+ :class="[col.classHandler?.(item, col, items, cols), col.class, { '<md:hidden': col.isDesktop, 'hidden <md:table-cell': col.isMobile }, tdClass]"
27
+ :dir="col.dir"
28
+ >
29
+ <slot
30
+ :name="col.name"
31
+ :col="col"
32
+ :item="item"
33
+ :items="_at(item, col.key)"
34
+ :index="col.name + '-slot'"
35
+ >
36
+ <div class="flex flex-col gap-0.5">
37
+ <p :class="textClass">
38
+ {{ col.handler ? col.handler(_at(item, col.key), item, col, items, cols) : _at(item, col.key).join(" ") }}
39
+ </p>
40
+ <small
41
+ v-if="col.subKey?.length"
42
+ class="font-500 text-gray-600 text-xs"
43
+ >{{ _at(item, col.subKey).join(" ") }}</small>
44
+ </div>
45
+ </slot>
46
+ </td>
47
+ <td
48
+ v-if="parentKey"
49
+ class="!max-w-1 !w-1 !p-1"
50
+ >
51
+ <UnNuxtIcon
52
+ class="cursor-pointer w-5 h-5"
53
+ name="solar:add-circle-broken"
54
+ @click="$emit('add:row', item)"
55
+ />
56
+ </td>
57
+ </tr>
58
+ <template v-if="parentKey && subItems?.length && open">
59
+ <UnTableRow
60
+ v-for="(i, index) in subItems"
61
+ :key="index"
62
+ v-model="selected"
63
+ :item="i"
64
+ :items
65
+ :cols
66
+ :parent-key
67
+ :level="level + 1"
68
+ :id-key
69
+ :text-class
70
+ :td-class
71
+ :tr-class
72
+ @click:row="$emit('click:row', i)"
73
+ @dbclick:row="$emit('dbclick:row', i)"
74
+ @add:row="$emit('add:row', i)"
75
+ />
76
+ </template>
77
77
  </template>
78
78
 
79
79
  <script setup>
@@ -1,29 +1,29 @@
1
1
  <template>
2
- <div class="border-t-(1 solid border) flex flex-wrap children:grow-1 sticky bottom-0 mt-auto z-2 bg-white rounded-t-xl -mx-4 <md:-mx-3 px-4 py-3 gap-3">
3
- <UnCard
4
- :item="selectedWallet"
5
- class="basis-full"
6
- />
7
- <UnButton
8
- v-if="selectedWallet?.coin?.withdrawable && !noWithdraw"
9
- variant="primary-fill"
10
- class="basis-full"
11
- label="برداشت"
12
- @click="$emit('withdraw')"
13
- />
14
- <UnButton
15
- v-if="selectedWallet?.coin?.transferable && !noTransfer"
16
- variant="primary-fill"
17
- label="انتقال"
18
- @click="$emit('transfer')"
19
- />
20
- <UnButton
21
- v-if="selectedWallet?.coin?.depositable && !noDeposit"
22
- variant="primary-fill"
23
- label="افزایش اعتبار"
24
- @click="$emit('deposit')"
25
- />
26
- </div>
2
+ <div class="border-t-(1 solid border) flex flex-wrap children:grow-1 sticky bottom-0 mt-auto z-2 bg-white rounded-t-xl -mx-4 <md:-mx-3 px-4 py-3 gap-3">
3
+ <UnCard
4
+ :item="selectedWallet"
5
+ class="basis-full"
6
+ />
7
+ <UnButton
8
+ v-if="selectedWallet?.coin?.withdrawable && !noWithdraw"
9
+ variant="primary-fill"
10
+ class="basis-full"
11
+ label="برداشت"
12
+ @click="$emit('withdraw')"
13
+ />
14
+ <UnButton
15
+ v-if="selectedWallet?.coin?.transferable && !noTransfer"
16
+ variant="primary-fill"
17
+ label="انتقال"
18
+ @click="$emit('transfer')"
19
+ />
20
+ <UnButton
21
+ v-if="selectedWallet?.coin?.depositable && !noDeposit"
22
+ variant="primary-fill"
23
+ label="افزایش اعتبار"
24
+ @click="$emit('deposit')"
25
+ />
26
+ </div>
27
27
  </template>
28
28
 
29
29
  <script setup>
@@ -1,3 +1,3 @@
1
- {
2
- "extends": "../../../.nuxt/tsconfig.server.json",
3
- }
1
+ {
2
+ "extends": "../../../.nuxt/tsconfig.server.json",
3
+ }
package/package.json CHANGED
@@ -1,103 +1,103 @@
1
- {
2
- "name": "@unsource/ui",
3
- "version": "2.9.38",
4
- "private": false,
5
- "description": "nuxt ui kit for unsource env",
6
- "repository": "https://github.com/alisa2142/unsource-ui",
7
- "license": "MIT",
8
- "type": "module",
9
- "exports": {
10
- ".": {
11
- "types": "./dist/types.d.mts",
12
- "import": "./dist/module.mjs"
13
- },
14
- "./assets/*": "./dist/runtime/assets/*",
15
- "./composables/*": "./dist/runtime/composables/*"
16
- },
17
- "main": "./dist/module.mjs",
18
- "typesVersions": {
19
- "*": {
20
- ".": [
21
- "./dist/types.d.mts"
22
- ]
23
- }
24
- },
25
- "files": [
26
- "dist"
27
- ],
28
- "scripts": {
29
- "prepack": "nuxt-module-build build",
30
- "dev": "npm run dev:prepare && nuxi dev playground",
31
- "dev:build": "nuxi build playground",
32
- "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
33
- "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
34
- "lint": "eslint .",
35
- "test": "vitest run",
36
- "test:watch": "vitest watch",
37
- "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
38
- },
39
- "dependencies": {
40
- "@neshan-maps-platform/vue3-openlayers": "^2.0.1",
41
- "@nuxt/kit": "~3.19.3",
42
- "@nuxtjs/device": "^3.2.4",
43
- "@nuxtjs/i18n": "^10.1.2",
44
- "@persian-tools/persian-tools": "^4.0.4",
45
- "@types/big.js": "^6.2.2",
46
- "@types/numeral": "^2.0.5",
47
- "@vueuse/components": "^14.1.0",
48
- "@vueuse/core": "^14.1.0",
49
- "@vueuse/nuxt": "^14.1.0",
50
- "ajv": "^8.17.1",
51
- "big.js": "^7.0.1",
52
- "defu": "^6.1.4",
53
- "floating-vue": "^5.2.2",
54
- "handlebars": "^4.7.8",
55
- "jalali-moment": "^3.3.11",
56
- "numeral": "^2.0.6",
57
- "nuxt-lodash": "^2.5.3",
58
- "nuxt-swiper": "^1.2.2",
59
- "ol": "^8.2.0",
60
- "persian-number": "^1.6.0",
61
- "socket.io-client": "^4.8.1",
62
- "swiper": "^11.2.10",
63
- "unocss-preset-scrollbar": "^3.2.0",
64
- "vue-json-pretty": "^2.6.0",
65
- "vue3-otp-input": "^0.5.40",
66
- "vue3-persian-datetime-picker": "^1.2.2",
67
- "vue3-toastify": "^0.2.8"
68
- },
69
- "peerDependencies": {
70
- "ajv": "^8.17.1",
71
- "big.js": "^7.0.1",
72
- "handlebars": "^4.7.8",
73
- "jalali-moment": "^3.3.11",
74
- "numeral": "^2.0.6",
75
- "nuxt-lodash": "^2.5.3",
76
- "nuxt-swiper": "^1.2.2",
77
- "persian-number": "^1.6.0",
78
- "socket.io-client": "^4.8.1",
79
- "swiper": "^11.2.10",
80
- "unocss-preset-scrollbar": "^3.2.0",
81
- "vue3-toastify": "^0.2.8"
82
- },
83
- "devDependencies": {
84
- "@nuxt/devtools": "^2.6.5",
85
- "@nuxt/eslint-config": "^1.9.0",
86
- "@nuxt/icon": "1.15.0",
87
- "@nuxt/module-builder": "^1.0.2",
88
- "@nuxt/schema": "^3.19.3",
89
- "@nuxt/test-utils": "^3.19.2",
90
- "@types/node": "latest",
91
- "@unhead/vue": "^1.11.20",
92
- "@unocss/nuxt": "^66.5.9",
93
- "changelogen": "^0.6.2",
94
- "eslint": "^9.37.0",
95
- "nuxt": "~3.19.3",
96
- "sass": "^1.93.2",
97
- "sass-embedded": "^1.93.2",
98
- "typescript": "~5.9.3",
99
- "unocss": "^66.5.9",
100
- "vitest": "^3.2.4",
101
- "vue-tsc": "^3.1.0"
102
- }
103
- }
1
+ {
2
+ "name": "@unsource/ui",
3
+ "version": "2.9.40",
4
+ "private": false,
5
+ "description": "nuxt ui kit for unsource env",
6
+ "repository": "https://github.com/alisa2142/unsource-ui",
7
+ "license": "MIT",
8
+ "type": "module",
9
+ "exports": {
10
+ ".": {
11
+ "types": "./dist/types.d.mts",
12
+ "import": "./dist/module.mjs"
13
+ },
14
+ "./assets/*": "./dist/runtime/assets/*",
15
+ "./composables/*": "./dist/runtime/composables/*"
16
+ },
17
+ "main": "./dist/module.mjs",
18
+ "typesVersions": {
19
+ "*": {
20
+ ".": [
21
+ "./dist/types.d.mts"
22
+ ]
23
+ }
24
+ },
25
+ "files": [
26
+ "dist"
27
+ ],
28
+ "scripts": {
29
+ "prepack": "nuxt-module-build build",
30
+ "dev": "npm run dev:prepare && nuxi dev playground",
31
+ "dev:build": "nuxi build playground",
32
+ "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
33
+ "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
34
+ "lint": "eslint .",
35
+ "test": "vitest run",
36
+ "test:watch": "vitest watch",
37
+ "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
38
+ },
39
+ "dependencies": {
40
+ "@neshan-maps-platform/vue3-openlayers": "^2.0.1",
41
+ "@nuxt/kit": "~3.19.3",
42
+ "@nuxtjs/device": "^3.2.4",
43
+ "@nuxtjs/i18n": "^10.1.2",
44
+ "@persian-tools/persian-tools": "^4.0.4",
45
+ "@types/big.js": "^6.2.2",
46
+ "@types/numeral": "^2.0.5",
47
+ "@vueuse/components": "^13.9.0",
48
+ "@vueuse/core": "^13.9.0",
49
+ "@vueuse/nuxt": "^13.9.0",
50
+ "ajv": "^8.17.1",
51
+ "big.js": "^7.0.1",
52
+ "defu": "^6.1.4",
53
+ "floating-vue": "^5.2.2",
54
+ "handlebars": "^4.7.8",
55
+ "jalali-moment": "^3.3.11",
56
+ "numeral": "^2.0.6",
57
+ "nuxt-lodash": "^2.5.3",
58
+ "nuxt-swiper": "^1.2.2",
59
+ "ol": "^8.2.0",
60
+ "persian-number": "^1.6.0",
61
+ "socket.io-client": "^4.8.1",
62
+ "swiper": "^11.2.10",
63
+ "unocss-preset-scrollbar": "^3.2.0",
64
+ "vue-json-pretty": "^2.6.0",
65
+ "vue3-otp-input": "^0.5.40",
66
+ "vue3-persian-datetime-picker": "^1.2.2",
67
+ "vue3-toastify": "^0.2.8"
68
+ },
69
+ "peerDependencies": {
70
+ "ajv": "^8.17.1",
71
+ "big.js": "^7.0.1",
72
+ "handlebars": "^4.7.8",
73
+ "jalali-moment": "^3.3.11",
74
+ "numeral": "^2.0.6",
75
+ "nuxt-lodash": "^2.5.3",
76
+ "nuxt-swiper": "^1.2.2",
77
+ "persian-number": "^1.6.0",
78
+ "socket.io-client": "^4.8.1",
79
+ "swiper": "^11.2.10",
80
+ "unocss-preset-scrollbar": "^3.2.0",
81
+ "vue3-toastify": "^0.2.8"
82
+ },
83
+ "devDependencies": {
84
+ "@nuxt/devtools": "^2.6.5",
85
+ "@nuxt/eslint-config": "^1.9.0",
86
+ "@nuxt/icon": "1.15.0",
87
+ "@nuxt/module-builder": "^1.0.2",
88
+ "@nuxt/schema": "^3.19.3",
89
+ "@nuxt/test-utils": "^3.19.2",
90
+ "@types/node": "latest",
91
+ "@unhead/vue": "^1.11.20",
92
+ "@unocss/nuxt": "^66.5.9",
93
+ "changelogen": "^0.6.2",
94
+ "eslint": "^9.37.0",
95
+ "nuxt": "~3.19.3",
96
+ "sass": "^1.93.2",
97
+ "sass-embedded": "^1.93.2",
98
+ "typescript": "~5.9.3",
99
+ "unocss": "^66.5.9",
100
+ "vitest": "^3.2.4",
101
+ "vue-tsc": "^3.1.0"
102
+ }
103
+ }