@indielayer/ui 1.11.0 → 1.12.0

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.
Files changed (14) hide show
  1. package/docs/pages/component/select/multiple.vue +35 -13
  2. package/docs/pages/component/tag/usage.vue +26 -0
  3. package/lib/components/select/Select.vue.d.ts +3 -3
  4. package/lib/components/select/Select.vue.js +203 -188
  5. package/lib/components/tag/Tag.vue.d.ts +1 -0
  6. package/lib/components/tag/Tag.vue.js +42 -35
  7. package/lib/index.js +1 -1
  8. package/lib/index.umd.js +4 -4
  9. package/lib/version.d.ts +1 -1
  10. package/lib/version.js +1 -1
  11. package/package.json +1 -1
  12. package/src/components/select/Select.vue +14 -5
  13. package/src/components/tag/Tag.vue +11 -6
  14. package/src/version.ts +1 -1
package/docs/pages/component/select/multiple.vue CHANGED
@@ -4,20 +4,27 @@ import { ref } from 'vue'
4
4
  const selectedMultiple = ref<string[]>(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M'])
5
5
 
6
6
  const options = ref([
7
- { value: 'A', label: 'Option lorem ipsum' },
8
- { value: 'B', label: 'Option B ipsum' },
9
- { value: 'C', label: 'Option C lorem ipsum' },
10
- { value: 'D', label: 'D' },
11
- { value: 'E', label: 'E ipsum' },
12
- { value: 'F', label: 'Option F' },
13
- { value: 'G', label: 'Option lorem ipsum qoiwjdoqiwjdoqiwjdoqiwjdoi' },
14
- { value: 'H', label: 'Option H' },
15
- { value: 'I', label: 'lorem ipsum dolo' },
16
- { value: 'J', label: 'Option J' },
17
- { value: 'K', label: 'Option K' },
18
- { value: 'L', label: 'consectetur adipi' },
19
- { value: 'M', label: 'Option M' },
7
+ { value: 'A', label: 'Option lorem ipsum', color: 'bg-red-500' },
8
+ { value: 'B', label: 'Option B ipsum', color: 'bg-orange-500' },
9
+ { value: 'C', label: 'Option C lorem ipsum', color: 'bg-amber-500' },
10
+ { value: 'D', label: 'D', color: 'bg-yellow-500' },
11
+ { value: 'E', label: 'E ipsum', color: 'bg-lime-500' },
12
+ { value: 'F', label: 'Option F', color: 'bg-green-500' },
13
+ { value: 'G', label: 'Option lorem ipsum qoiwjdoqiwjdoqiwjdoqiwjdoi', color: 'bg-emerald-500' },
14
+ { value: 'H', label: 'Option H', color: 'bg-teal-500' },
15
+ { value: 'I', label: 'lorem ipsum dolo', color: 'bg-cyan-500' },
16
+ { value: 'J', label: 'Option J', color: 'bg-sky-500' },
17
+ { value: 'K', label: 'Option K', color: 'bg-blue-500' },
18
+ { value: 'L', label: 'consectetur adipi', color: 'bg-indigo-500' },
19
+ { value: 'M', label: 'Option M', color: 'bg-violet-500' },
20
20
  ])
21
+
22
+ const optionsWithColors = options.value.map((option) => {
23
+ return {
24
+ ...option,
25
+ prefix: option.color,
26
+ }
27
+ })
21
28
  </script>
22
29
 
23
30
  <template>
@@ -46,5 +53,20 @@ const options = ref([
46
53
  multiple-checkbox
47
54
  filterable
48
55
  />
56
+ <x-select
57
+ v-model="selectedMultiple"
58
+ label="Multi select - checkbox - prefix items"
59
+ placeholder="Multiple"
60
+ :options="optionsWithColors"
61
+ multiple-checkbox
62
+ filterable
63
+ >
64
+ <template #prefix="{ item }">
65
+ <div class="w-2 h-2 rounded-full" :class="item.prefix"></div>
66
+ </template>
67
+ <template #tag-prefix="{ item }">
68
+ <div class="w-2 h-2 rounded-full" :class="item.prefix"></div>
69
+ </template>
70
+ </x-select>
49
71
  </div>
50
72
  </template>
package/docs/pages/component/tag/usage.vue CHANGED
@@ -25,5 +25,31 @@ const notifications = useNotifications()
25
25
  <x-tag removable disabled @remove="notifications?.log('remove me')">I'm a md tag</x-tag>
26
26
  <x-tag removable size="lg" @remove="notifications?.log('remove me')">I'm a lg tag</x-tag>
27
27
  <x-tag removable size="xl" @remove="notifications?.log('remove me')">I'm a xl tag</x-tag>
28
+
29
+ <div class="flex flex-col max-w-xs gap-y-1">
30
+ <div>
31
+ <x-tag outlined>
32
+ I'm a veeeeeeeeeeeeeeeeeeeeeeeery long tag
33
+ </x-tag>
34
+ </div>
35
+
36
+ <div>
37
+ <x-tag outlined>
38
+ <template #prefix>
39
+ <div class="w-2 h-2 rounded-full bg-green-500"></div>
40
+ </template>
41
+ I'm a veeeeeeeeeeeeeeeeeeeeery long tag
42
+ </x-tag>
43
+ </div>
44
+
45
+ <div>
46
+ <x-tag removable outlined>
47
+ <template #prefix>
48
+ <div class="w-2 h-2 rounded-full bg-green-500"></div>
49
+ </template>
50
+ I'm a veeeeeeeeeeeeeeeeeeery long tag
51
+ </x-tag>
52
+ </div>
53
+ </div>
28
54
  </div>
29
55
  </template>
package/lib/components/select/Select.vue.d.ts CHANGED
@@ -13,7 +13,6 @@ declare const selectProps: {
13
13
  type: StringConstructor;
14
14
  default: string;
15
15
  };
16
- filterInputProps: ObjectConstructor;
17
16
  virtualList: BooleanConstructor;
18
17
  virtualListOffsetTop: NumberConstructor;
19
18
  virtualListOffsetBottom: NumberConstructor;
@@ -95,7 +94,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
95
94
  type: StringConstructor;
96
95
  default: string;
97
96
  };
98
- filterInputProps: ObjectConstructor;
99
97
  virtualList: BooleanConstructor;
100
98
  virtualListOffsetTop: NumberConstructor;
101
99
  virtualListOffsetBottom: NumberConstructor;
@@ -825,7 +823,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
825
823
  type: StringConstructor;
826
824
  default: string;
827
825
  };
828
- filterInputProps: ObjectConstructor;
829
826
  virtualList: BooleanConstructor;
830
827
  virtualListOffsetTop: NumberConstructor;
831
828
  virtualListOffsetBottom: NumberConstructor;
@@ -1234,6 +1231,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
1234
1231
  disabled: boolean;
1235
1232
  label: string;
1236
1233
  }): any;
1234
+ "tag-prefix"?(_: {
1235
+ item: SelectOption | undefined;
1236
+ }): any;
1237
1237
  "content-header"?(_: {}): any;
1238
1238
  prefix?(_: {
1239
1239
  item: {