@redseed/redseed-ui-vue3 1.0.7 → 1.0.9

package/index.js

@@ -1,29 +1,47 @@
-// import ButtonPrimary from './src/components/Button/ButtonPrimary.vue'
-// import ButtonPrimaryLight from './src/components/Button/ButtonPrimaryLight.vue'
-// import ButtonPrimaryLightRounded from './src/components/Button/ButtonPrimaryLightRounded.vue'
-// import ButtonPrimaryRounded from './src/components/Button/ButtonPrimaryRounded.vue'
-// import ButtonSecondary from './src/components/Button/ButtonSecondary.vue'
-// import ButtonSecondaryLight from './src/components/Button/ButtonSecondaryLight.vue'
-// import ButtonSecondaryLightRounded from './src/components/Button/ButtonSecondaryLightRounded.vue'
-// import ButtonSecondaryRounded from './src/components/Button/ButtonSecondaryRounded.vue'
-// import ButtonSlot from './src/components/Button/ButtonSlot.vue'
+import ButtonPrimary from './src/components/Button/ButtonPrimary.vue'
+import ButtonPrimaryLight from './src/components/Button/ButtonPrimaryLight.vue'
+import ButtonPrimaryLightRounded from './src/components/Button/ButtonPrimaryLightRounded.vue'
+import ButtonPrimaryRounded from './src/components/Button/ButtonPrimaryRounded.vue'
+import ButtonSecondary from './src/components/Button/ButtonSecondary.vue'
+import ButtonSecondaryLight from './src/components/Button/ButtonSecondaryLight.vue'
+import ButtonSecondaryLightRounded from './src/components/Button/ButtonSecondaryLightRounded.vue'
+import ButtonSecondaryRounded from './src/components/Button/ButtonSecondaryRounded.vue'
+import ButtonSlot from './src/components/Button/ButtonSlot.vue'
 import Card from './src/components/Card/Card.vue'
+import FormRegister from './src/components/Form/FormRegister.vue'
+import FormFieldEmail from './src/components/FormField/FormFieldEmail.vue'
+import FormFieldPassword from './src/components/FormField/FormFieldPassword.vue'
+import FormFieldPasswordToggle from './src/components/FormField/FormFieldPasswordToggle.vue'
+import FormFieldCheckbox from './src/components/FormField/FormFieldCheckbox.vue'
+import FormFieldHidden from './src/components/FormField/FormFieldHidden.vue'
+import FormFieldText from './src/components/FormField/FormFieldText.vue'
+import FormFieldSlot from './src/components/FormField/FormFieldSlot.vue'
 import Image from './src/components/Image/Image.vue'
 import MessageBox from './src/components/MessageBox/MessageBox.vue'
 import TwoColumnLayout from './src/components/TwoColumnLayout/TwoColumnLayout.vue'
+import SignUpWithGoogle from './src/components/Social/SignUpWithGoogle.vue'
 
 export {
-    // ButtonPrimary,
-    // ButtonPrimaryLight,
-    // ButtonPrimaryLightRounded,
-    // ButtonPrimaryRounded,
-    // ButtonSecondary,
-    // ButtonSecondaryLight,
-    // ButtonSecondaryLightRounded,
-    // ButtonSecondaryRounded,
-    // ButtonSlot,
+    ButtonPrimary,
+    ButtonPrimaryLight,
+    ButtonPrimaryLightRounded,
+    ButtonPrimaryRounded,
+    ButtonSecondary,
+    ButtonSecondaryLight,
+    ButtonSecondaryLightRounded,
+    ButtonSecondaryRounded,
+    ButtonSlot,
     Card,
+    FormRegister,
+    FormFieldEmail,
+    FormFieldPassword,
+    FormFieldPasswordToggle,
+    FormFieldCheckbox,
+    FormFieldHidden,
+    FormFieldText,
+    FormFieldSlot,
     Image,
     MessageBox,
     TwoColumnLayout,
+    SignUpWithGoogle,
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "scripts": {

package/src/components/Button/ButtonSlot.vue

@@ -40,10 +40,16 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    submit: {
+        type: Boolean,
+        default: false,
+    },
 })
 
 const defaultSize = computed(() => !props.xs && !props.sm && !props.md && !props.lg)
 
+const type = computed(() => props.submit ? 'submit' : 'button')
+
 const buttonSlotClass = computed(() => [
     'button-slot',
     {
@@ -87,7 +93,7 @@ const buttonSlotIconClass = computed(() => [
 <template>
 <button
     :class="buttonSlotClass"
-    type="button"
+    :type="type"
     v-bind="$attrs"
 >
     <span v-if="$slots.icon"
@@ -103,7 +109,7 @@ const buttonSlotIconClass = computed(() => [
 <style lang="scss" scoped>
 .button-slot {
     // default shape and control
-    @apply w-fit h-fit inline-flex items-center justify-center select-none outline-none rounded border transition;
+    @apply w-fit h-fit inline-flex items-center justify-center select-none outline-none rounded border font-semibold transition;
     // default colors
     @apply bg-black/80 text-white ring-black/20 border-black/80;
     // default hover state

package/src/components/Form/FormRegister.vue

@@ -0,0 +1,112 @@
+<script setup>
+import { ref } from 'vue'
+import ButtonPrimary from '../Button/ButtonPrimary.vue'
+import FormFieldCheckbox from '../FormField/FormFieldCheckbox.vue'
+import FormFieldEmail from '../FormField/FormFieldEmail.vue'
+import FormFieldPasswordToggle from '../FormField/FormFieldPasswordToggle.vue'
+import FormFieldText from '../FormField/FormFieldText.vue'
+import FormSlot from './FormSlot.vue'
+
+const props = defineProps({
+    form: {
+        type: Object,
+        default: {
+            name: '',
+            email: '',
+            password: '',
+        },
+    },
+})
+
+const formRef = ref(props.form)
+</script>
+<template>
+<FormSlot class="form-register">
+    <template #image v-if="$slots.image">
+        <slot name="image"></slot>
+    </template>
+
+    <slot name="social"></slot>
+
+    <div v-if="$slots.social"
+        class="form-register__or-container"
+    >
+        <div class="form-register__or-line">
+            <div class="form-register__or">
+                <slot name="or">
+                    or
+                </slot>
+            </div>
+        </div>
+    </div>
+
+    <slot name="name"
+        formRef="formRef"
+    >
+        <FormFieldText
+            v-model="formRef.name"
+        >
+            <template #label>
+                Name
+            </template>
+        </FormFieldText>
+    </slot>
+
+    <FormFieldEmail
+        v-model="formRef.email"
+    >
+        <template #label>
+            Email
+        </template>
+    </FormFieldEmail>
+
+    <FormFieldPasswordToggle
+        v-model="formRef.password"
+    >
+        <template #label>
+            Password
+        </template>
+    </FormFieldPasswordToggle>
+
+    <FormFieldCheckbox>
+        <template #label>
+            <slot name="terms"></slot>
+        </template>
+    </FormFieldCheckbox>
+
+    <slot name="submit"
+        formRef="formRef"
+    >
+        <ButtonPrimary full lg submit>
+            <template #label>
+                <slot name="submit-label">
+                    Register
+                </slot>
+            </template>
+        </ButtonPrimary>
+    </slot>
+
+    <div v-if="$slots.signin" class="form-register__signin">
+        <slot name="signin"></slot>
+    </div>
+</FormSlot>
+</template>
+<style lang="scss" scoped>
+.form-register {
+    &__or-container {
+        @apply w-full relative flex justify-center mb-2;
+    }
+
+    &__or-line {
+        @apply after:content-[''] after:absolute after:top-1/2 after:left-0 after:bg-gray-300 after:h-px after:w-full;
+    }
+
+    &__or {
+        @apply relative z-1 bg-white px-6;
+    }
+
+    &__signin {
+        @apply text-sm pt-4;
+    }
+}
+</style>

package/src/components/Form/FormSlot.vue

@@ -0,0 +1,30 @@
+<script setup>
+</script>
+<template>
+<div class="form-slot">
+    <div v-if="$slots.image" class="form-slot__image">
+        <slot name="image" />
+    </div>
+
+    <div class="form-slot__content">
+        <slot />
+    </div>
+</div>
+</template>
+<style lang="scss" scoped>
+.form-slot {
+    @apply flex flex-col sm:justify-center items-center;
+    @apply text-base text-gray-700;
+
+    &__image {
+        @apply mb-8;
+    }
+
+    &__content {
+        @apply w-full sm:max-w-md px-10 xs:px-12 md:px-16 py-10 bg-white shadow-md overflow-hidden rounded-lg;
+        > * {
+            @apply first:mt-0 mt-4;
+        }
+    }
+}
+</style>

package/src/components/FormField/FormFieldCheckbox.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { ref, computed } from 'vue'
+import FormFieldSlot from './FormFieldSlot.vue'
+import { CheckIcon } from '@heroicons/vue/24/outline'
+
+const emit = defineEmits(['update:checked'])
+
+const props = defineProps({
+    checked: {
+        type: [Array, Boolean],
+        default: false,
+    },
+    value: {
+        type: String,
+        default: null,
+    },
+})
+
+const iconChecked = ref(false)
+
+const proxyChecked = computed({
+    get() {
+        iconChecked.value = props.checked
+        return props.checked
+    },
+
+    set(val) {
+        iconChecked.value = val
+        emit('update:checked', val)
+    },
+})
+</script>
+<template>
+<FormFieldSlot class="form-field-checkbox">
+    <template #label>
+        <div class="form-field-checkbox__checkbox">
+            <div class="form-field-checkbox__check">
+                <CheckIcon v-if="iconChecked" class="form-field-checkbox__icon"></CheckIcon>
+                <input
+                    v-model="proxyChecked"
+                    v-bind="$attrs"
+                    type="checkbox"
+                    :value="value"
+                >
+            </div>
+            <div v-if="$slots.label"
+                class="form-field-checkbox__label"
+            >
+                <slot name="label"></slot>
+            </div>
+        </div>
+    </template>
+    <template #error v-if="$slots.error">
+        <slot name="error"></slot>
+    </template>
+</FormFieldSlot>
+</template>
+<style lang="scss" scoped>
+.form-field-checkbox {
+    &__checkbox {
+        @apply flex;
+    }
+    &__label {
+        @apply ml-2;
+    }
+    &__check {
+        @apply w-6 h-6 shrink-0 relative bg-white;
+
+        input {
+            @apply appearance-none absolute inset-0 rounded transition shadow-sm;
+            @apply border border-gray-300;
+            @apply focus:border-gray-300 focus:ring focus:ring-gray-300 focus:ring-opacity-50;
+            @apply invalid:border-red-500 invalid:ring invalid:ring-red-500 invalid:ring-opacity-20;
+        }
+    }
+}
+</style>

package/src/components/FormField/FormFieldEmail.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { ref } from 'vue'
+import FormFieldSlot from './FormFieldSlot.vue'
+
+// Apply all attributes to the input element, not the wrapper div
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = defineProps({
+    modelValue: [
+        String,
+        Number
+    ], //vue3 specific v-model pattern
+})
+
+defineEmits(['update:modelValue']) //vue3 specific v-model pattern
+
+const input = ref(null)
+</script>
+<template>
+<FormFieldSlot
+    class="form-field-email"
+    :id="$attrs.id"
+>
+    <template #label v-if="$slots.label">
+        <slot name="label"></slot>
+    </template>
+    <input ref="input"
+        v-bind="$attrs"
+        type="email"
+        :value="modelValue"
+        @input="$emit('update:modelValue', $event.target.value)"
+    >
+    <template #help v-if="$slots.help">
+        <slot name="help"></slot>
+    </template>
+    <template #error v-if="$slots.error">
+        <slot name="error"></slot>
+    </template>
+</FormFieldSlot>
+</template>
+<style lang="scss" scoped>
+</style>

package/src/components/FormField/FormFieldHidden.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { ref } from 'vue'
+import FormFieldSlot from './FormFieldSlot.vue'
+
+// Apply all attributes to the input element, not the wrapper div
+defineOptions({
+    inheritAttrs: false,
+})
+
+const input = ref(null)
+</script>
+<template>
+<FormFieldSlot
+    class="form-field-hidden"
+>
+    <input ref="input"
+        type="hidden"
+    >
+    <template #error v-if="$slots.error">
+        <slot name="error"></slot>
+    </template>
+</FormFieldSlot>
+</template>
+<style lang="scss" scoped>
+</style>

package/src/components/FormField/FormFieldPassword.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { ref } from 'vue'
+import FormFieldSlot from './FormFieldSlot.vue'
+
+// Apply all attributes to the input element, not the wrapper div
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = defineProps({
+    modelValue: [
+        String,
+        Number
+    ], //vue3 specific v-model pattern
+})
+
+defineEmits(['update:modelValue']) //vue3 specific v-model pattern
+
+const input = ref(null)
+</script>
+<template>
+<FormFieldSlot
+    class="form-field-password"
+    :id="$attrs.id"
+>
+    <template #label v-if="$slots.label">
+        <slot name="label"></slot>
+    </template>
+
+    <div :class="{
+        'form-field-password__group': true,
+        'form-field-password__group--toggle': $slots.toggle,
+    }">
+        <input ref="input"
+            type="password"
+            v-bind="$attrs"
+            :value="modelValue"
+            @input="$emit('update:modelValue', $event.target.value)"
+        >
+
+        <slot name="toggle"></slot>
+    </div>
+
+    <template #help v-if="$slots.help">
+        <slot name="help"></slot>
+    </template>
+
+    <template #error v-if="$slots.error">
+        <slot name="error"></slot>
+    </template>
+</FormFieldSlot>
+</template>
+<style lang="scss" scoped>
+.form-field-password {
+    @apply relative;
+
+    &__group {
+        @apply relative;
+        &--toggle {
+            input {
+                @apply pr-12;
+            }
+        }
+    }
+}
+</style>

package/src/components/FormField/FormFieldPasswordToggle.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { ref } from 'vue'
+import FormFieldPassword from './FormFieldPassword.vue'
+import { EyeIcon, EyeSlashIcon } from '@heroicons/vue/24/outline'
+
+// Apply all attributes to the input element, not the wrapper div
+defineOptions({
+    inheritAttrs: false,
+})
+
+const show = ref(false)
+
+function togglePassword() {
+    show.value = !show.value
+}
+</script>
+<template>
+<FormFieldPassword
+    v-bind="$attrs"
+    :type="show ? 'text' : 'password'"
+>
+    <template #label v-if="$slots.label">
+        <slot name="label"></slot>
+    </template>
+
+    <template #toggle>
+        <div class="form-field-password__toggle"
+            @click="togglePassword"
+        >
+            <EyeIcon v-if="!show"
+                class="form-field-password__toggle-icon"
+            ></EyeIcon>
+            <EyeSlashIcon v-if="show"
+                class="form-field-password__toggle-icon"
+            ></EyeSlashIcon>
+        </div>
+    </template>
+
+    <template #help v-if="$slots.help">
+        <slot name="help"></slot>
+    </template>
+
+    <template #error v-if="$slots.error">
+        <slot name="error"></slot>
+    </template>
+</FormFieldPassword>
+</template>
+<style lang="scss" scoped>
+.form-field-password {
+    &__toggle {
+        @apply absolute top-px bottom-px right-px rounded-tr rounded-br;
+        @apply flex items-center justify-center px-3 select-none cursor-pointer;
+    }
+
+    &__toggle-icon {
+        @apply w-5 h-5;
+    }
+}
+</style>

package/src/components/FormField/FormFieldSlot.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { computed, useAttrs } from 'vue'
+
+// Apply all attributes to the input element, not the wrapper div
+defineOptions({
+    inheritAttrs: false,
+})
+
+const attrs = useAttrs()
+
+const formFieldSlotClass = computed(() => [
+    'form-field-slot',
+    attrs.class
+])
+</script>
+<template>
+<div :class="formFieldSlotClass">
+    <div v-if="$slots.label"
+        class="form-field-slot__label"
+    >
+        <label
+            :for="$attrs.id"
+        >
+            <slot name="label"></slot>
+        </label>
+    </div>
+    <slot></slot>
+    <div v-if="$slots.help"
+        class="form-field-slot__help"
+    >
+        <slot name="help"></slot>
+    </div>
+    <div v-if="$slots.error"
+        class="form-field-slot__error"
+    >
+        <slot name="error"></slot>
+    </div>
+</div>
+</template>
+<style lang="scss" scoped>
+.form-field-slot {
+    @apply flex flex-col space-y-1 border-0 bg-transparent p-0;
+
+    &__label {
+        label {
+            @apply block font-medium text-base text-gray-700;
+        }
+    }
+
+    &__help {
+        @apply text-xs text-gray-500;
+    }
+
+    &__error {
+        @apply text-sm text-red-500;
+    }
+}
+</style>
+<style lang="scss">
+.form-field-slot {
+    input:not([type='checkbox']):not([type='radio']) {
+        @apply block w-full border rounded shadow-sm text-base transition py-2 px-3;
+        @apply bg-white placeholder-gray-300 border-gray-300;
+        @apply focus:ring focus:ring-gray-300 focus:ring-opacity-50 focus:outline-none ring-0 focus:bg-white focus:border-gray-400;
+        @apply invalid:border-red-500 invalid:ring invalid:ring-red-500 invalid:ring-opacity-20;
+    }
+}
+</style>

package/src/components/FormField/FormFieldText.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { ref } from 'vue'
+import FormFieldSlot from './FormFieldSlot.vue'
+
+// Apply all attributes to the input element, not the wrapper div
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = defineProps({
+    modelValue: [
+        String,
+        Number
+    ], //vue3 specific v-model pattern
+})
+
+defineEmits(['update:modelValue']) //vue3 specific v-model pattern
+
+const input = ref(null)
+</script>
+<template>
+<FormFieldSlot
+    class="form-field-text"
+    :id="$attrs.id"
+>
+    <template #label v-if="$slots.label">
+        <slot name="label"></slot>
+    </template>
+    <input ref="input"
+        v-bind="$attrs"
+        type="text"
+        :value="modelValue"
+        @input="$emit('update:modelValue', $event.target.value)"
+    >
+    <template #help v-if="$slots.help">
+        <slot name="help"></slot>
+    </template>
+    <template #error v-if="$slots.error">
+        <slot name="error"></slot>
+    </template>
+</FormFieldSlot>
+</template>
+<style lang="scss" scoped>
+</style>

package/src/components/Social/SignUpWithGoogle.vue

@@ -0,0 +1,125 @@
+<script setup>
+</script>
+<template>
+<button class="gsi-material-button">
+    <div class="gsi-material-button-state"></div>
+    <div class="gsi-material-button-content-wrapper">
+        <div class="gsi-material-button-icon">
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: block;">
+                <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
+                <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
+                <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
+                <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
+                <path fill="none" d="M0 0h48v48H0z"></path>
+        </svg>
+        </div>
+        <span class="gsi-material-button-contents">Sign up with Google</span>
+        <span style="display: none;">Sign up with Google</span>
+    </div>
+</button>
+</template>
+<style scoped>
+.gsi-material-button {
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    -webkit-appearance: none;
+    background-color: WHITE;
+    background-image: none;
+    border: 1px solid #d1d5db;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    color: #1f1f1f;
+    cursor: pointer;
+    font-family: 'Roboto', arial, sans-serif;
+    font-size: 14px;
+    height: 40px;
+    letter-spacing: 0.25px;
+    outline: none;
+    overflow: hidden;
+    padding: 0 12px;
+    position: relative;
+    text-align: center;
+    -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
+    transition: background-color .218s, border-color .218s, box-shadow .218s;
+    vertical-align: middle;
+    white-space: nowrap;
+    width: 100%;
+    max-width: 400px;
+    min-width: min-content;
+}
+
+.gsi-material-button .gsi-material-button-icon {
+    height: 20px;
+    margin-right: 12px;
+    min-width: 20px;
+    width: 20px;
+}
+
+.gsi-material-button .gsi-material-button-content-wrapper {
+    -webkit-align-items: center;
+    align-items: center;
+    display: flex;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+    -webkit-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+    height: 100%;
+    justify-content: space-between;
+    position: relative;
+    width: 100%;
+}
+
+.gsi-material-button .gsi-material-button-contents {
+    -webkit-flex-grow: 1;
+    flex-grow: 1;
+    font-family: 'Roboto', arial, sans-serif;
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top;
+}
+
+.gsi-material-button .gsi-material-button-state {
+    -webkit-transition: opacity .218s;
+    transition: opacity .218s;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.gsi-material-button:disabled {
+    cursor: default;
+    background-color: #ffffff61;
+    border-color: #1f1f1f1f;
+}
+
+.gsi-material-button:disabled .gsi-material-button-contents {
+    opacity: 38%;
+}
+
+.gsi-material-button:disabled .gsi-material-button-icon {
+    opacity: 38%;
+}
+
+.gsi-material-button:not(:disabled):active .gsi-material-button-state,
+.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
+    background-color: #303030;
+    opacity: 12%;
+}
+
+.gsi-material-button:not(:disabled):hover {
+    -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
+    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
+}
+
+.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
+    background-color: #ffffff;
+    opacity: 8%;
+}
+</style>