docs(BFormGroup): Refactor examples into separate files (bootstrap-vu…

…e-next#2491)

apps/docs/src/docs/components/demo/FormGroupFloatingLabels.vue

@@ -0,0 +1,34 @@
+<template>
+  <BFormGroup
+    id="fieldset-4"
+    description="Let us know your name."
+    label="Name"
+    label-for="input-floating-4"
+    valid-feedback="Thank you!"
+    :invalid-feedback="floatingInvalidFeedback"
+    :state="floatingState"
+    floating
+  >
+    <BFormInput
+      id="input-floating-4"
+      v-model="floatingName"
+      :state="floatingState"
+      trim
+      placeholder="Enter your name please"
+    />
+  </BFormGroup>
+  <div>
+    Name: <strong>{{ floatingName }}</strong>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, ref} from 'vue'
+
+const floatingName = ref('')
+
+const floatingState = computed(() => floatingName.value.length >= 4)
+const floatingInvalidFeedback = computed(() =>
+  floatingName.value.length > 0 ? 'Enter at least 4 characters.' : 'Please enter something.'
+)
+</script>

apps/docs/src/docs/components/demo/FormGroupHorizontalLayout.vue

@@ -0,0 +1,16 @@
+<template>
+  <!-- #region template -->
+  <BFormGroup
+    id="fieldset-horizontal"
+    label-cols-sm="4"
+    label-cols-lg="3"
+    content-cols-sm
+    content-cols-lg="7"
+    description="Let us know your name."
+    label="Enter your name"
+    label-for="input-horizontal"
+  >
+    <BFormInput id="input-horizontal" />
+  </BFormGroup>
+  <!-- #endregion template -->
+</template>

apps/docs/src/docs/components/demo/FormGroupId.vue

@@ -0,0 +1,7 @@
+<template>
+  <!-- #region template -->
+  <BFormGroup label="Enter your name">
+    <BFormInput id="input-id" />
+  </BFormGroup>
+  <!-- #endregion template -->
+</template>

apps/docs/src/docs/components/demo/FormGroupLabelSize.vue

@@ -0,0 +1,33 @@
+<template>
+  <!-- #region template -->
+  <BFormGroup
+    label-cols="4"
+    label-cols-lg="2"
+    label-size="sm"
+    label="Small"
+    label-for="input-sm"
+    class="my-1"
+  >
+    <BFormInput id="input-sm" size="sm" />
+  </BFormGroup>
+  <BFormGroup
+    label-cols="4"
+    label-cols-lg="2"
+    label="Default"
+    label-for="input-default"
+    class="my-1"
+  >
+    <BFormInput id="input-default" />
+  </BFormGroup>
+  <BFormGroup
+    label-cols="4"
+    label-cols-lg="2"
+    label-size="lg"
+    label="Large"
+    label-for="input-lg"
+    class="my-1"
+  >
+    <BFormInput id="input-lg" size="lg" />
+  </BFormGroup>
+  <!-- #endregion template -->
+</template>

apps/docs/src/docs/components/demo/FormGroupNested.vue

@@ -0,0 +1,34 @@
+<template>
+  <!-- #region template -->
+  <BCard bg-variant="light">
+    <BFormGroup
+      label-cols-lg="3"
+      label="Shipping Address"
+      label-size="lg"
+      label-class="fw-bold pt-0"
+      class="mb-0"
+    >
+      <BFormGroup label="Street:" label-for="nested-street" label-cols-sm="3" label-align-sm="end">
+        <BFormInput id="nested-street" />
+      </BFormGroup>
+      <BFormGroup label="City:" label-for="nested-city" label-cols-sm="3" label-align-sm="end">
+        <BFormInput id="nested-city" />
+      </BFormGroup>
+      <BFormGroup label="State:" label-for="nested-state" label-cols-sm="3" label-align-sm="end">
+        <BFormInput id="nested-state" />
+      </BFormGroup>
+      <BFormGroup
+        label="Country:"
+        label-for="nested-country"
+        label-cols-sm="3"
+        label-align-sm="end"
+      >
+        <BFormInput id="nested-country" />
+      </BFormGroup>
+      <BFormGroup label="Ship via:" label-cols-sm="3" label-align-sm="end" class="mb-0">
+        <BFormRadioGroup class="pt-2" :options="['Air', 'Courier', 'Mail']" />
+      </BFormGroup>
+    </BFormGroup>
+  </BCard>
+  <!-- #endregion template -->
+</template>

apps/docs/src/docs/components/demo/FormGroupOverview.vue

@@ -0,0 +1,28 @@
+<template>
+  <BFormGroup
+    id="fieldset-1"
+    description="Let us know your name."
+    label="Enter your name"
+    label-for="input-1"
+    valid-feedback="Thank you!"
+    :invalid-feedback="invalidFeedback"
+    :state="state"
+    label-class="mb-1"
+  >
+    <BFormInput id="input-1" v-model="name" :state="state" trim />
+  </BFormGroup>
+  <div>
+    Name: <strong>{{ name }}</strong>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, ref} from 'vue'
+
+const name = ref('')
+
+const state = computed(() => name.value.length >= 4)
+const invalidFeedback = computed(() =>
+  name.value.length > 0 ? 'Enter at least 4 characters.' : 'Please enter something.'
+)
+</script>

apps/docs/src/docs/components/demo/FormGroupState.vue

@@ -0,0 +1,13 @@
+<template>
+  <!-- #region template -->
+  <BCard>
+    <BFormGroup :state="false" class="mb-2">
+      <BFormInput />
+    </BFormGroup>
+    <BFormGroup :state="false">
+      <!-- Use the state prop to override this behavior -->
+      <BFormInput :state="null" />
+    </BFormGroup>
+  </BCard>
+  <!-- #endregion template -->
+</template>