@redseed/redseed-ui-vue3 4.1.2 → 4.1.3

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 (8) hide show
  1. package/package.json +1 -1
  2. package/src/components/FormField/FormFieldPasswordToggle.vue +6 -2
  3. package/src/components/FormField/FormFieldRadioGroup.vue +28 -23
  4. package/src/components/FormField/FormFieldSelect.vue +10 -7
  5. package/src/components/FormField/FormFieldSlot.vue +7 -1
  6. package/src/components/FormField/FormFieldText.vue +7 -6
  7. package/src/components/FormField/FormFieldTextarea.vue +4 -3
  8. package/src/components/FormField/FormFieldUploaderWrapper.vue +5 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redseed/redseed-ui-vue3",
3
- "version": "4.1.2",
3
+ "version": "4.1.3",
4
4
  "description": "RedSeed UI Vue 3 components",
5
5
  "main": "index.js",
6
6
  "repository": "https://github.com/redseedtraining/redseed-ui",
package/src/components/FormField/FormFieldPasswordToggle.vue CHANGED
@@ -1,11 +1,15 @@
1
1
  <script setup>
2
- import { ref } from 'vue'
2
+ import { ref, useAttrs } from 'vue'
3
3
  import FormFieldText from './FormFieldText.vue'
4
4
  import { EyeIcon, EyeSlashIcon } from '@heroicons/vue/24/outline'
5
5
 
6
6
  const show = ref(false)
7
7
 
8
+ const attrs = useAttrs()
9
+
8
10
  function togglePassword() {
11
+ if (attrs.disabled) return
12
+
9
13
  show.value = !show.value
10
14
  }
11
15
 
@@ -47,7 +51,7 @@ defineExpose({
47
51
  <style lang="scss" scoped>
48
52
  .rsui-form-field-password {
49
53
  &__icon {
50
- @apply size-5 text-rsui-grey-400;
54
+ @apply size-5 text-rsui-grey-500;
51
55
  }
52
56
  // :deep(.rsui-form-field-text__group) {
53
57
  // input {
package/src/components/FormField/FormFieldRadioGroup.vue CHANGED
@@ -24,32 +24,37 @@ function setValue(value) {
24
24
 
25
25
  </script>
26
26
  <template>
27
- <FormFieldSlot :id="$attrs.id" :class="[$attrs.class, 'rsui-form-field-radio-group']" :required="$attrs.required"
28
- :compact="$attrs.compact">
29
- <template #label v-if="$slots.label">
30
- <slot name="label"></slot>
31
- </template>
32
- <div class="rsui-form-field-radio-group__items">
33
- <div v-for="option in options" :key="option" :class="['rsui-form-field-radio-group__item', {'rsui-form-field-radio-group__item--disabled': option.disabled}]"
34
- @click="!option.disabled && setValue(option.value)">
35
- <div class="rsui-form-field-radio-group__control" v-if="model !== option.value"></div>
36
- <div class="rsui-form-field-radio-group__control rsui-form-field-radio-group__control--active"
37
- v-if="model == option.value">
38
- <div></div>
39
- </div>
40
- <input :disabled="option.disabled" class="rsui-form-field-radio-group__item-native-control" type="radio" :value="option.value"
41
- v-model="model" :id="$attrs.id" :name="$attrs.name">
42
- <label :class="['rsui-form-field-radio-group__item-label', {'rsui-form-field-radio-group__item-label--disabled': option.disabled}]">{{ option.label }}</label>
27
+ <FormFieldSlot
28
+ :id="$attrs.id"
29
+ :class="[$attrs.class, 'rsui-form-field-radio-group']"
30
+ :required="$attrs.required"
31
+ :showAsterisk="$attrs.showAsterisk"
32
+ :compact="$attrs.compact"
33
+ >
34
+ <template #label v-if="$slots.label">
35
+ <slot name="label"></slot>
36
+ </template>
37
+ <div class="rsui-form-field-radio-group__items">
38
+ <div v-for="option in options" :key="option" :class="['rsui-form-field-radio-group__item', {'rsui-form-field-radio-group__item--disabled': option.disabled}]"
39
+ @click="!option.disabled && setValue(option.value)">
40
+ <div class="rsui-form-field-radio-group__control" v-if="model !== option.value"></div>
41
+ <div class="rsui-form-field-radio-group__control rsui-form-field-radio-group__control--active"
42
+ v-if="model == option.value">
43
+ <div></div>
43
44
  </div>
45
+ <input :disabled="option.disabled" class="rsui-form-field-radio-group__item-native-control" type="radio" :value="option.value"
46
+ v-model="model" :id="$attrs.id" :name="$attrs.name">
47
+ <label :class="['rsui-form-field-radio-group__item-label', {'rsui-form-field-radio-group__item-label--disabled': option.disabled}]">{{ option.label }}</label>
44
48
  </div>
45
- <template #help v-if="$slots.help">
46
- <slot name="help"></slot>
47
- </template>
49
+ </div>
50
+ <template #help v-if="$slots.help">
51
+ <slot name="help"></slot>
52
+ </template>
48
53
 
49
- <template #error v-if="$slots.error">
50
- <slot name="error"></slot>
51
- </template>
52
- </FormFieldSlot>
54
+ <template #error v-if="$slots.error">
55
+ <slot name="error"></slot>
56
+ </template>
57
+ </FormFieldSlot>
53
58
  </template>
54
59
  <style lang="scss" scoped>
55
60
  .rsui-form-field-radio-group {
package/src/components/FormField/FormFieldSelect.vue CHANGED
@@ -119,6 +119,7 @@ defineExpose({
119
119
  :id="$attrs.id"
120
120
  :class="[$attrs.class, 'rsui-form-field-select']"
121
121
  :required="$attrs.required"
122
+ :showAsterisk="$attrs.showAsterisk"
122
123
  :compact="$attrs.compact"
123
124
  >
124
125
  <template #label v-if="$slots.label">
@@ -126,6 +127,7 @@ defineExpose({
126
127
  </template>
127
128
  <div class="rsui-form-field-select__group">
128
129
  <select ref="selectElement"
130
+ class="peer"
129
131
  v-model="model"
130
132
  :autocomplete="$attrs.autocomplete"
131
133
  :autofocus="$attrs.autofocus"
@@ -240,7 +242,7 @@ defineExpose({
240
242
 
241
243
  &__options {
242
244
  @apply hidden absolute top-0 w-full z-50;
243
- @apply bg-white p-2 mt-2 rounded-md shadow-full-light;
245
+ @apply bg-white p-2 mt-2 rounded-lg shadow-full-light;
244
246
  @apply max-h-[80vh] sm:max-h-[60vh] overflow-y-auto;
245
247
  &--open {
246
248
  @apply block;
@@ -248,7 +250,7 @@ defineExpose({
248
250
  }
249
251
 
250
252
  &__option {
251
- @apply flex flex-nowrap items-center justify-between cursor-pointer px-4 py-3 rounded-md;
253
+ @apply flex flex-nowrap items-center justify-between cursor-pointer px-4 py-3 rounded-lg;
252
254
  @apply bg-white hover:bg-rsui-grey-200 text-rsui-grey-900 transition;
253
255
  &--disabled {
254
256
  @apply opacity-50 hover:bg-white cursor-auto;
@@ -266,7 +268,8 @@ defineExpose({
266
268
 
267
269
  &__icon {
268
270
  @apply absolute top-0 right-5 bottom-0 flex items-center justify-center;
269
- @apply text-rsui-grey-800 h-full w-8 pointer-events-none;
271
+ @apply text-rsui-grey-900 h-full w-8 pointer-events-none;
272
+ @apply peer-disabled:text-rsui-grey-500;
270
273
  &--open {
271
274
  svg {
272
275
  @apply -rotate-180;
@@ -280,11 +283,11 @@ defineExpose({
280
283
  select {
281
284
  @apply block w-full border ring-0 bg-none cursor-pointer appearance-none transition;
282
285
  @apply py-3 pl-5 pr-14 truncate;
283
- @apply text-base rounded-full outline-none focus:outline-none;
284
- @apply bg-white text-rsui-grey-900 placeholder-rsui-grey-400 border-rsui-grey-200;
285
- @apply focus:ring focus:ring-rsui-grey-400 focus:border-rsui-grey-400;
286
+ @apply text-base rounded-lg outline-none focus:outline-none;
287
+ @apply bg-white text-rsui-grey-900 placeholder-rsui-grey-500 border-rsui-grey-500;
288
+ @apply focus:border-rsui-grey-500;
286
289
  @apply invalid:border-rsui-error-500 invalid:ring-0;
287
- @apply disabled:text-rsui-grey-400 disabled:bg-rsui-grey-200 disabled:ring-0 disabled:cursor-default;
290
+ @apply disabled:text-rsui-grey-500 disabled:bg-rsui-grey-100 disabled:border-rsui-grey-200 disabled:ring-0 disabled:cursor-default;
288
291
  }
289
292
 
290
293
  option {
package/src/components/FormField/FormFieldSlot.vue CHANGED
@@ -6,6 +6,10 @@ const props = defineProps({
6
6
  type: Boolean,
7
7
  required: false,
8
8
  },
9
+ showAsterisk: {
10
+ type: Boolean,
11
+ default: true,
12
+ },
9
13
  })
10
14
 
11
15
  defineOptions({
@@ -25,7 +29,9 @@ const formFieldSlotClass = computed(() => [
25
29
  const formFieldSlotLabelClass = computed(() => [
26
30
  'rsui-form-field-slot__label',
27
31
  {
28
- 'rsui-form-field-slot__label--required': attrs.required !== undefined && attrs.required !== false,
32
+ 'rsui-form-field-slot__label--required': attrs.required !== undefined
33
+ && attrs.required !== false
34
+ && props.showAsterisk,
29
35
  },
30
36
  ])
31
37
  </script>
package/src/components/FormField/FormFieldText.vue CHANGED
@@ -23,6 +23,7 @@ defineExpose({
23
23
  :id="$attrs.id"
24
24
  :class="[$attrs.class, 'rsui-form-field-text']"
25
25
  :required="$attrs.required"
26
+ :showAsterisk="$attrs.showAsterisk"
26
27
  :compact="$attrs.compact"
27
28
  >
28
29
  <template #label v-if="$slots.label">
@@ -80,11 +81,11 @@ defineExpose({
80
81
  &__group {
81
82
  @apply relative flex flex-nowrap overflow-hidden;
82
83
  @apply text-base transition;
83
- @apply w-full border rounded-md ring-0;
84
- @apply bg-white placeholder-rsui-grey-400 border-rsui-grey-200;
85
- @apply has-[:focus]:ring has-[:focus]:ring-rsui-grey-400 has-[:focus]:border-rsui-grey-400;
84
+ @apply w-full border rounded-lg ring-0;
85
+ @apply bg-white placeholder-rsui-grey-500 border-rsui-grey-500;
86
+ @apply has-[:focus]:border-rsui-grey-500;
86
87
  @apply has-[:user-invalid]:border-rsui-error-500 has-[:user-invalid]:ring-0;
87
- @apply has-[:disabled]:text-rsui-grey-400 has-[:disabled]:bg-rsui-grey-200 has-[:disbaled]:ring-0;
88
+ @apply has-[:disabled]:text-rsui-grey-500 has-[:disabled]:bg-rsui-grey-100 has-[:disabled]:border-rsui-grey-200 has-[:disbaled]:ring-0;
88
89
  }
89
90
  &__prefix {
90
91
  @apply flex items-center justify-center px-4 select-none;
@@ -110,8 +111,8 @@ defineExpose({
110
111
  {
111
112
  @apply flex-1;
112
113
  @apply text-base text-rsui-grey-900 transition py-3 px-4 outline-none focus:outline-none;
113
- @apply bg-white placeholder-rsui-grey-400;
114
- @apply disabled:text-rsui-grey-400 disabled:bg-rsui-grey-200 disabled:ring-0;
114
+ @apply bg-white placeholder-rsui-grey-500;
115
+ @apply disabled:text-rsui-grey-500 disabled:bg-rsui-grey-100 disabled:border-rsui-grey-200 disabled:ring-0;
115
116
  }
116
117
  }
117
118
  </style>
package/src/components/FormField/FormFieldTextarea.vue CHANGED
@@ -35,6 +35,7 @@ defineExpose({
35
35
  :id="$attrs.id"
36
36
  :class="[$attrs.class, 'rsui-form-field-textarea']"
37
37
  :required="$attrs.required"
38
+ :showAsterisk="$attrs.showAsterisk"
38
39
  :compact="$attrs.compact"
39
40
  >
40
41
  <template #label v-if="$slots.label">
@@ -71,10 +72,10 @@ defineExpose({
71
72
  textarea {
72
73
  @apply w-full border rounded-md ring-0 text-base transition resize-none;
73
74
  @apply py-3 px-4 outline-none focus:outline-none;
74
- @apply text-rsui-grey-900 bg-white placeholder-rsui-grey-400 border-rsui-grey-200;
75
- @apply focus:ring focus:ring-rsui-grey-400 focus:border-rsui-grey-400;
75
+ @apply text-rsui-grey-900 bg-white placeholder-rsui-grey-500 border-rsui-grey-500;
76
+ @apply focus:border-rsui-grey-500;
76
77
  @apply invalid:border-rsui-error-500 invalid:ring-0;
77
- @apply disabled:text-rsui-grey-400 disabled:bg-rsui-grey-200 disabled:ring-0;
78
+ @apply disabled:text-rsui-grey-500 disabled:bg-rsui-grey-100 disabled:border-rsui-grey-200 disabled:ring-0;
78
79
  -ms-overflow-style: none;
79
80
  scrollbar-width: none;
80
81
  &::-webkit-scrollbar {
package/src/components/FormField/FormFieldUploaderWrapper.vue CHANGED
@@ -102,6 +102,7 @@ function removeAction() {
102
102
  :id="$attrs.id"
103
103
  :class="[$attrs.class, 'rsui-form-field-uploader']"
104
104
  :required="$attrs.required"
105
+ :showAsterisk="$attrs.showAsterisk"
105
106
  :compact="$attrs.compact"
106
107
  >
107
108
  <template #label v-if="$slots.label">
@@ -192,11 +193,11 @@ function removeAction() {
192
193
  &__container {
193
194
  @apply w-fit max-w-80 bg-rsui-grey-100;
194
195
  @apply relative select-none;
195
- @apply rounded-md border border-rsui-grey-300 border-dashed;
196
+ @apply rounded-md border border-rsui-grey-500 border-dashed;
196
197
  @apply flex flex-nowrap justify-center items-center gap-4;
197
198
  @apply px-4 py-2.5;
198
199
  &--success {
199
- @apply border-rsui-grey-400 border-solid;
200
+ @apply border-rsui-grey-500 border-solid;
200
201
  }
201
202
  }
202
203
 
@@ -209,7 +210,7 @@ function removeAction() {
209
210
  @apply shrink-0 size-6;
210
211
 
211
212
  &--success {
212
- @apply text-rsui-grey-400;
213
+ @apply text-rsui-grey-500;
213
214
  }
214
215
 
215
216
  :deep(svg) {
@@ -238,7 +239,7 @@ function removeAction() {
238
239
  }
239
240
 
240
241
  &__action-icon {
241
- @apply size-6 cursor-pointer text-rsui-grey-400;
242
+ @apply size-6 cursor-pointer text-rsui-grey-500;
242
243
 
243
244
  :deep(svg) {
244
245
  @apply size-6 stroke-2;