@vue-interface/tag-field 1.0.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 (13) hide show
  1. package/LICENSE +22 -0
  2. package/README.md +43 -0
  3. package/dist/index.d.ts +3 -0
  4. package/dist/src/TagField.vue.d.ts +114 -0
  5. package/dist/tag-field.js +383 -0
  6. package/dist/tag-field.js.map +1 -0
  7. package/dist/tag-field.umd.cjs +2 -0
  8. package/dist/tag-field.umd.cjs.map +1 -0
  9. package/dist/vite.config.d.ts +3 -0
  10. package/index.css +6 -0
  11. package/package.json +63 -0
  12. package/src/TagField.vue +624 -0
  13. package/src/css/tag-field.css +129 -0
package/src/css/tag-field.css ADDED
@@ -0,0 +1,129 @@
1
+ @import "tailwindcss";
2
+
3
+ @theme {
4
+ /* Searchable Select Field Dropdown */
5
+ --tag-field-dropdown-display: flex;
6
+ --tag-field-dropdown-flex-direction: column;
7
+ --tag-field-dropdown-position: absolute;
8
+ --tag-field-dropdown-z-index: 10;
9
+ --tag-field-dropdown-width: 100%;
10
+ --tag-field-dropdown-max-height: 18rem;
11
+ --tag-field-dropdown-margin-top: 0.25rem;
12
+ --tag-field-dropdown-overflow: auto;
13
+ --tag-field-dropdown-border-width: 1px;
14
+ --tag-field-dropdown-border-radius: 0.25rem;
15
+ --tag-field-dropdown-border-color: var(--color-neutral-300, oklch(87% 0 0));
16
+ --tag-field-dropdown-background-color: var(--color-white, #fff);
17
+ --tag-field-dropdown-color: var(--color-black, #000);
18
+ --tag-field-dropdown-box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
19
+
20
+ --tag-field-dropdown-dark-border-color: var(--color-neutral-600, oklch(43.9% 0 0));
21
+ --tag-field-dropdown-dark-background-color: var(--color-neutral-900, oklch(20.5% 0 0));
22
+ --tag-field-dropdown-dark-color: var(--color-white, #fff);
23
+
24
+ --tag-field-dropdown-text-align: left;
25
+ --tag-field-dropdown-padding: 0.5em 1em;
26
+ --tag-field-dropdown-border-bottom-width: 1px;
27
+ --tag-field-dropdown-hover-background-color: var(--color-neutral-100, oklch(96.1% 0 0));
28
+ --tag-field-dropdown-dark-hover-background-color: var(--color-neutral-800, oklch(26.9% 0 0));
29
+
30
+ /* Searchable Select Field Input */
31
+ --tag-field-input-position: relative;
32
+ --tag-field-input-activity-indicator-position: absolute;
33
+ --tag-field-input-activity-indicator-top: 50%;
34
+ --tag-field-input-activity-indicator-right: 0.75em;
35
+ --tag-field-input-activity-indicator-transform: translateY(-50%);
36
+
37
+ /* Searchable Select-field Clear Button */
38
+ --tag-field-clear-button-display: flex;
39
+ --tag-field-clear-button-cursor: pointer;
40
+ --tag-field-clear-button-color: var(--color-black, #000);
41
+ --tag-field-clear-button-hover-color: var(--color-neutral-600, oklch(43.9% 0 0));
42
+
43
+ --tag-field-clear-button-dark-color: var(--color-white, #fff);
44
+ --tag-field-clear-button-dark-hover-color: var(--color-neutral-400, oklch(70.8% 0 0));
45
+ }
46
+
47
+ @utility tag-field-dropdown {
48
+ display: var(--tag-field-dropdown-display);
49
+ flex-direction: var(--tag-field-dropdown-flex-direction);
50
+ position: var(--tag-field-dropdown-position);
51
+ z-index: var(--tag-field-dropdown-z-index);
52
+ width: var(--tag-field-dropdown-width);
53
+ max-height: var(--tag-field-dropdown-max-height);
54
+ margin-top: var(--tag-field-dropdown-margin-top);
55
+ overflow: var(--tag-field-dropdown-overflow);
56
+ font-size: 1rem;
57
+ border-width: var(--tag-field-dropdown-border-width);
58
+ border-radius: var(--tag-field-dropdown-border-radius);
59
+ border-color: var(--tag-field-dropdown-border-color);
60
+ background-color: var(--tag-field-dropdown-background-color);
61
+ color: var(--tag-field-dropdown-color);
62
+ box-shadow: var(--tag-field-dropdown-box-shadow);
63
+
64
+ @variant dark {
65
+ border-color: var(--tag-field-dropdown-dark-border-color);
66
+ background-color: var(--tag-field-dropdown-dark-background-color);
67
+ color: var(--tag-field-dropdown-dark-color);
68
+ }
69
+
70
+ & > button {
71
+ text-align: var(--tag-field-dropdown-text-align);
72
+ padding: var(--tag-field-dropdown-padding);
73
+ border-color: var(--tag-field-dropdown-border-color);
74
+
75
+ &:not(:last-child) {
76
+ border-bottom-width: var(--tag-field-dropdown-border-bottom-width);
77
+ }
78
+
79
+ &:hover {
80
+ background-color: var(--tag-field-dropdown-hover-background-color);
81
+ }
82
+
83
+ @variant dark {
84
+ border-color: var(--tag-field-dropdown-dark-border-color);
85
+
86
+ &:hover {
87
+ background-color: var(--tag-field-dropdown-dark-hover-background-color);
88
+ }
89
+ }
90
+ }
91
+ }
92
+
93
+ @utility tag-field {
94
+ position: var(--tag-field-input-position);
95
+
96
+ & .form-control-inner {
97
+ position: var(--tag-field-input-position);
98
+ }
99
+
100
+ & .form-control-activity-indicator {
101
+ position: var(--tag-field-input-activity-indicator-position);
102
+ top: var(--tag-field-input-activity-indicator-top);
103
+ right: var(--tag-field-input-activity-indicator-right);
104
+ transform: var(--tag-field-input-activity-indicator-transform);
105
+ }
106
+
107
+ &.has-clear-button .form-control.is-valid,
108
+ &.has-clear-button .form-control.is-invalid {
109
+ background-image: none;
110
+ }
111
+ }
112
+
113
+ @utility tag-field-clear-button {
114
+ display: var(--tag-field-clear-button-display);
115
+ cursor: var(--tag-field-clear-button-cursor);
116
+ color: var(--tag-field-clear-button-color);
117
+
118
+ &:hover {
119
+ color: var(--tag-field-clear-button-hover-color);
120
+ }
121
+
122
+ @variant dark {
123
+ color: var(--tag-field-clear-button-dark-color);
124
+
125
+ &:hover {
126
+ color: var(--tag-field-clear-button-dark-hover-color);
127
+ }
128
+ }
129
+ }