Merge pull request #247 from marceloatg/feature/checkbox-output-group

SldsCheckboxOutputGroup created
marceloatg · Dec 15, 2023 · 268977e · 268977e
2 parents 6b1acc9 + 4b71100
commit 268977e
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 0 deletions.
diff --git a/docs/examples/test.vue b/docs/examples/test.vue
@@ -1,5 +1,15 @@
 <template>
 
+    <!-- Checkbox output group -->
+    <example-container class="slds-m-bottom_medium">
+        <slds-checkbox-output-group
+            :value="values"
+            :options="options1"
+            label="alo"
+        />
+        value: {{ values }}
+    </example-container>
+
     <!-- Checkbox group -->
     <example-container class="slds-m-bottom_medium">
         <slds-checkbox-group
@@ -428,11 +438,13 @@ import SldsGrid from "../../src/components/slds-grid/slds-grid.vue"
 import SldsColumn from "../../src/components/slds-grid/slds-column.vue"
 import SldsInput from "../../src/components/slds-input/slds-input.vue"
 import SldsCheckboxGroup from "../../src/components/slds-checkbox-group/slds-checkbox-group.vue"
+import SldsCheckboxOutputGroup from "../../src/components/slds-checkbox-output-group/slds-checkbox-output-group.vue"
 
 export default {
     name: "test",
 
     components: {
+        SldsCheckboxOutputGroup,
         SldsCheckboxGroup,
         SldsInput,
         SldsColumn,

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -18,6 +18,8 @@ export { default as SldsCheckboxButtonOption } from "./slds-checkbox-button-grou
 export { default as SldsCheckboxGroup } from "./slds-checkbox-group/slds-checkbox-group.vue"
 export { default as SldsCheckboxGroupOption } from "./slds-checkbox-group/slds-checkbox-group-option.vue"
 export { default as SldsCheckboxOutput } from "./slds-checkbox-output/slds-checkbox-output.vue"
+export { default as SldsCheckboxOutputGroup } from "./slds-checkbox-output-group/slds-checkbox-output-group.vue"
+export { default as SldsCheckboxOutputGroupOption } from "./slds-checkbox-output-group/slds-checkbox-output-group-option.vue"
 export { default as SldsCheckboxToggle } from "./slds-checkbox-toggle/slds-checkbox-toggle.vue"
 export { default as SldsColumn } from "./slds-grid/slds-column.vue"
 export { default as SldsColumnGrid } from "./slds-grid/slds-column-grid.vue"

diff --git a/src/components/slds-checkbox-output-group/slds-checkbox-output-group-option.vue b/src/components/slds-checkbox-output-group/slds-checkbox-output-group-option.vue
@@ -0,0 +1,63 @@
+<template>
+    <div class="slds-checkbox">
+
+        <!-- Checked icon -->
+        <slds-icon
+            v-if="value"
+            class="slds-align-middle"
+            x-small
+            icon-name="utility:check"
+        />
+
+        <!-- Unchecked icon -->
+        <slds-icon
+            v-else
+            class="slds-align-middle"
+            x-small
+            icon-name="utility:steps"
+        />
+
+        <label class="slds-checkbox__label">
+
+            <span class="slds-m-right--x-small"/>
+
+            <span class="slds-form-element__label">
+                {{ label }}
+            </span>
+
+        </label>
+
+    </div>
+</template>
+
+<script lang="ts">
+import SldsIcon from "../slds-icon/slds-icon.vue"
+import { defineComponent } from "vue"
+
+export default defineComponent({
+    name: "SldsCheckboxOutputGroupOption",
+
+    components: { SldsIcon },
+
+    props: {
+        borderless: Boolean,
+
+        /**
+         * Input label.
+         */
+        label: String,
+
+        /**
+         * Indicates whether the input is stacked among other inputs.
+         */
+        stacked: Boolean,
+
+        /**
+         * Input value.
+         */
+        value: null,
+    },
+})
+</script>
+
+
diff --git a/src/components/slds-checkbox-output-group/slds-checkbox-output-group.vue b/src/components/slds-checkbox-output-group/slds-checkbox-output-group.vue
@@ -0,0 +1,46 @@
+<template>
+    <slds-form-element :label="label" :stacked="stacked" :bordered="!borderless">
+        <template #default>
+            <slds-checkbox-output-group-option
+                v-for="option in options"
+                :key="option.value"
+                :borderless="borderless"
+                :label="option.label"
+                stacked
+                :value="value.includes(option.value)"
+            />
+        </template>
+    </slds-form-element>
+</template>
+
+<script lang="ts">
+import SldsFormElement from "../slds-form-element/slds-form-element.vue"
+import { defineComponent, type PropType } from "vue"
+import type { CheckboxGroupOption } from "../slds-checkbox-group/checkbox-group-option"
+import SldsCheckboxOutputGroupOption from "../slds-checkbox-output-group/slds-checkbox-output-group-option.vue"
+
+export default defineComponent({
+    name: "SldsCheckboxOutputGroup",
+
+    components: { SldsCheckboxOutputGroupOption, SldsFormElement },
+
+    props: {
+        borderless: Boolean,
+
+        /**
+         * Input label.
+         */
+        label: String,
+
+        value: { type: Array as PropType<string[]>, default: () => [] },
+
+        options: { type: Array as PropType<CheckboxGroupOption[]>, default: () => [] },
+
+        /**
+         * Indicates whether the input is stacked among other inputs.
+         */
+        stacked: Boolean,
+    },
+})
+</script>
+