2.0.0 • Published 2 years ago

@dpc-sdp/ripple-ui-forms v2.0.0

Weekly downloads
-
License
Apache-2.0
Repository
-
Last release
2 years ago

Ripple UI Forms

A form component library built with Formkit. View the Ripple storybook to start exploring available components.

Form fields can be used individually <RplFormInput> to handcraft form experiences. However, using the <RplForm> component and providing a form schema provides a simpler way to define and generate forms.

<template>
  <RplForm
    id="shorten-url"
    title="URL Shorten"
    :schema="[
      {
        $formkit: 'RplFormEmail',
        label: 'Email Address',
        id: 'email',
        name: 'email',
        validation: 'required'
      },
      {
        $formkit: 'RplFormActions',
        label: 'Subscribe',
        id: 'submit'
      }
    ]"
    :submissionState="{
      status: 'error',
      title: 'Error',
      message: 'Sorry, something went wrong.'
    }"
    @submit="({ data }) => { postFormData(data) }"
  >
  </RplForm>
</template>

SDP Platform (Tide)

If you're using this package within a Tide environment you don't need to directly install it, it will be installed as a dependency of @dpc-sdp/nuxt-ripple and all components will be available globally, if you wish to be explicit you can import them from #components.

The details below relate to using this package outside of Tide.

Installation

npm install @dpc-sdp/ripple-ui-forms

Usage (Nuxt)

Ripple UI Forms exports a nuxt module that you can add to your nuxt config, note the addition of /nuxt.

export default defineNuxtConfig({
  modules: [
    '@dpc-sdp/ripple-ui-forms/nuxt'
  ]
})

There is no need to import the components as they will be registered globally by the nuxt module.

<template>
  <RplFormInput id="name" name="name" type="text" />
</template>

Usage (Vue)

To use a component, import it from @dpc-sdp/ripple-ui-forms/vue, note the addition of /vue.

<script setup>
  import { RplFormInput } from '@dpc-sdp/ripple-ui-forms/vue';
</script>

<template>
  <RplFormInput id="name" name="name" type="text" />
</template>
2.0.0-next.59

2 years ago

2.0.0-next.51

2 years ago

2.0.0-next.52

2 years ago

2.0.0-next.53

2 years ago

2.0.0-next.54

2 years ago

2.0.0-next.55

2 years ago

2.0.0-next.56

2 years ago

2.0.0-next.57

2 years ago

2.0.0-next.58

2 years ago

2.0.0-next.60

2 years ago

2.0.0-next.61

2 years ago

2.0.0-next.48

2 years ago

2.0.0-next.49

2 years ago

2.0.0-next.40

2 years ago

2.0.0-next.41

2 years ago

2.0.0-next.42

2 years ago

2.0.0-next.43

2 years ago

2.0.0-next.44

2 years ago

2.0.0-next.45

2 years ago

2.0.0-next.46

2 years ago

2.0.0-next.47

2 years ago

2.0.0-next.50

2 years ago

2.0.0-next.37

2 years ago

2.0.0-next.38

2 years ago

2.0.0-next.39

2 years ago

2.0.0-next.30

2 years ago

2.0.0-next.31

2 years ago

2.0.0-next.32

2 years ago

2.0.0-next.33

2 years ago

2.0.0-next.34

2 years ago

2.0.0-next.35

2 years ago

2.0.0-next.36

2 years ago

2.0.0-next.26

2 years ago

2.0.0-next.27

2 years ago

2.0.0-next.28

2 years ago

2.0.0-next.29

2 years ago

2.0.0-next.25

2 years ago

2.0.0-alpha.43

2 years ago

2.0.0-alpha.49

2 years ago

2.0.0-alpha.48

2 years ago

2.0.0-next.73

2 years ago

2.0.0-next.74

2 years ago

2.0.0-next.75

2 years ago

2.0.0-next.62

2 years ago

2.0.0-next.63

2 years ago

2.0.0-next.64

2 years ago

2.0.0-next.65

2 years ago

2.0.0-next.67

2 years ago

2.0.0-next.68

2 years ago

2.0.0-next.69

2 years ago

2.0.0-next.71

2 years ago

2.0.0-next.72

2 years ago

2.0.0

2 years ago

2.0.0-next.23

2 years ago

2.0.0-next.24

2 years ago

2.1.0-alpha.200

2 years ago

2.0.0-rc.1

2 years ago

2.1.0-alpha.193

2 years ago

2.1.0-alpha.192

2 years ago

2.1.0-alpha.195

2 years ago

2.1.0-alpha.194

2 years ago

2.1.0-alpha.191

2 years ago

2.1.0-alpha.190

2 years ago

2.1.0-alpha.197

2 years ago

2.1.0-alpha.183

2 years ago

2.1.0-alpha.189

2 years ago

2.1.0-alpha.186

2 years ago

2.1.0-alpha.185

2 years ago

2.1.0-alpha.188

2 years ago

2.1.0-alpha.173

2 years ago

2.1.0-alpha.178

2 years ago

2.1.0-alpha.175

2 years ago

2.1.0-alpha.174

2 years ago

2.1.0-alpha.177

2 years ago

2.1.0-alpha.176

2 years ago

2.1.0-alpha.182

2 years ago

2.1.0-alpha.181

2 years ago

2.1.0-alpha.180

2 years ago

2.1.0-alpha.171

2 years ago

2.1.0-alpha.170

2 years ago

2.1.0-alpha.169

2 years ago

2.1.0-alpha.166

2 years ago

2.1.0-alpha.165

2 years ago

2.1.0-alpha.162

2 years ago

2.1.0-alpha.164

2 years ago

2.1.0-alpha.163

2 years ago

2.1.0-alpha.98

2 years ago

2.1.0-alpha.97

2 years ago

2.1.0-alpha.99

2 years ago

2.1.0-alpha.93

2 years ago

2.1.0-alpha.96

2 years ago

2.1.0-alpha.95

2 years ago

2.1.0-alpha.160

2 years ago

2.1.0-alpha.161

2 years ago

2.1.0-alpha.76

2 years ago

2.1.0-alpha.75

2 years ago

2.1.0-alpha.78

2 years ago

2.1.0-alpha.71

2 years ago

2.1.0-alpha.73

2 years ago

2.1.0-alpha.150

2 years ago

2.1.0-alpha.157

2 years ago

2.1.0-alpha.159

2 years ago

2.1.0-alpha.81

2 years ago

2.1.0-alpha.158

2 years ago

2.1.0-alpha.80

2 years ago

2.1.0-alpha.152

2 years ago

2.1.0-alpha.155

2 years ago

2.1.0-alpha.154

2 years ago

2.1.0-alpha.87

2 years ago

2.1.0-alpha.86

2 years ago

2.1.0-alpha.89

2 years ago

2.1.0-alpha.88

2 years ago

2.1.0-alpha.83

2 years ago

2.1.0-alpha.149

2 years ago

2.1.0-alpha.82

2 years ago

2.1.0-alpha.85

2 years ago

2.1.0-alpha.140

2 years ago

2.1.0-alpha.90

2 years ago

2.1.0-alpha.145

2 years ago

2.1.0-alpha.148

2 years ago

2.1.0-alpha.147

2 years ago

2.1.0-alpha.91

2 years ago

2.1.0-alpha.142

2 years ago

2.1.0-alpha.143

2 years ago

2.1.0-alpha.139

2 years ago

2.1.0-alpha.138

2 years ago

2.1.0-alpha.135

2 years ago

2.1.0-alpha.134

2 years ago

2.1.0-alpha.137

2 years ago

2.1.0-alpha.130

2 years ago

2.1.0-alpha.133

2 years ago

2.1.0-alpha.132

2 years ago

2.1.0-alpha.127

2 years ago

2.1.0-alpha.129

2 years ago

2.1.0-alpha.69

2 years ago

2.1.0-alpha.124

2 years ago

2.1.0-alpha.126

2 years ago

2.1.0-alpha.70

2 years ago

2.1.0-alpha.120

2 years ago

2.1.0-alpha.122

2 years ago

2.1.0-alpha.116

2 years ago

2.1.0-alpha.113

2 years ago

2.1.0-alpha.112

2 years ago

2.1.0-alpha.115

2 years ago

2.1.0-alpha.114

2 years ago

2.1.0-alpha.111

2 years ago

2.1.0-alpha.110

2 years ago

2.1.0-alpha.109

2 years ago

2.1.0-alpha.106

2 years ago

2.1.0-alpha.108

2 years ago

2.1.0-alpha.107

2 years ago

2.1.0-alpha.101

2 years ago

2.1.0-alpha.104

2 years ago

2.1.0-alpha.100

2 years ago

2.1.0-alpha.67

2 years ago

2.1.0-alpha.65

2 years ago

2.1.0-alpha.64

2 years ago

2.1.0-alpha.63

2 years ago

2.1.0-alpha.54

3 years ago

2.1.0-alpha.53

3 years ago

2.1.0-alpha.55

3 years ago

2.1.0-alpha.50

3 years ago

2.1.0-alpha.52

3 years ago

2.1.0-alpha.51

3 years ago

2.1.0-alpha.57

3 years ago

2.1.0-alpha.61

3 years ago

2.1.0-alpha.60

3 years ago

2.1.0-alpha.29

3 years ago

2.1.0-alpha.28

3 years ago

2.1.0-alpha.25

3 years ago

2.1.0-alpha.27

3 years ago

2.1.0-alpha.26

3 years ago

2.1.0-alpha.31

3 years ago

2.1.0-alpha.34

3 years ago

2.1.0-alpha.30

3 years ago

2.1.0-alpha.39

3 years ago

2.1.0-alpha.36

3 years ago

2.1.0-alpha.35

3 years ago

2.1.0-alpha.38

3 years ago

2.1.0-alpha.43

3 years ago

2.1.0-alpha.42

3 years ago

2.1.0-alpha.45

3 years ago

2.1.0-alpha.44

3 years ago

2.1.0-alpha.41

3 years ago

2.1.0-alpha.40

3 years ago

2.1.0-alpha.47

3 years ago

2.1.0-alpha.49

3 years ago

2.1.0-alpha.48

3 years ago

2.1.0-alpha.24

3 years ago

2.1.0-alpha.23

3 years ago

2.1.0-alpha.20

3 years ago

2.1.0-alpha.18

3 years ago

2.1.0-alpha.17

3 years ago

2.1.0-alpha.19

3 years ago

2.1.0-alpha.16

3 years ago

2.1.0-alpha.15

3 years ago

2.1.0-alpha.14

3 years ago

2.1.0-alpha.13

3 years ago

2.1.0-alpha.12

3 years ago

2.1.0-alpha.11

3 years ago

2.1.0-alpha.10

3 years ago

2.1.0-alpha.9

3 years ago

2.1.0-alpha.8

3 years ago

2.1.0-alpha.6

3 years ago

2.1.0-alpha.5

3 years ago

2.1.0-alpha.1

3 years ago

2.1.0-alpha.0

3 years ago

2.0.1-alpha.4

3 years ago

2.0.1-alpha.3

3 years ago

2.0.1-alpha.2

3 years ago

2.0.1-alpha.0

3 years ago