first commit

resources/js/pages/forms/checkbox.vue

@@ -0,0 +1,142 @@
+<script setup>
+import * as demoCode from '@/views/demos/forms/form-elements/checkbox/demoCodeCheckbox'
+</script>
+
+<template>
+  <VRow class="match-height">
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 Basic -->
+      <AppCardCode
+        title="Basic"
+        :code="demoCode.basic"
+      >
+        <p><code>v-checkbox</code> in its simplest form provides a toggle between 2 values.</p>
+
+        <DemoCheckboxBasic />
+      </AppCardCode>
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 Density -->
+      <AppCardCode
+        title="Density"
+        :code="demoCode.density"
+      >
+        <p>Use <code>density</code> prop to reduces the input height. Available options are: <code>default</code>, <code>comfortable</code>, and <code>compact</code>.</p>
+
+        <DemoCheckboxDensity />
+      </AppCardCode>
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 Colors -->
+      <AppCardCode
+        title="Colors"
+        :code="demoCode.colors"
+      >
+        <p>Checkboxes can be colored by using any of the builtin colors and contextual names using the <code>color</code> prop.</p>
+
+        <DemoCheckboxColors />
+      </AppCardCode>
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 Model as array -->
+      <AppCardCode
+        title="Model as array"
+        :code="demoCode.modelAsArray"
+      >
+        <p>Multiple <code>v-checkbox</code>'s can share the same <code>v-model</code> by using an array.</p>
+
+        <DemoCheckboxModelAsArray />
+      </AppCardCode>
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 Icon -->
+      <AppCardCode
+        title="Icon"
+        :code="demoCode.icon"
+      >
+        <p>Use <code>false-icon</code> and <code>true-icon</code> prop to change the icon on the checkbox.</p>
+
+        <DemoCheckboxIcon />
+      </AppCardCode>
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 Checkbox Value -->
+      <AppCardCode
+        title="Checkbox Value"
+        :code="demoCode.checkboxValue"
+      >
+        <p>Use <code>false-value</code> and <code>true-value</code> prop to sets value for truthy and falsy state</p>
+
+        <DemoCheckboxCheckboxValue />
+      </AppCardCode>
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 States -->
+      <AppCardCode
+        title="States"
+        :code="demoCode.states"
+      >
+        <p><code>v-checkbox</code> can have different states such as <code>default</code>, <code>disabled</code>, and <code>indeterminate</code>.</p>
+
+        <DemoCheckboxStates />
+      </AppCardCode>
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 Label Slot -->
+      <AppCardCode
+        title="Label Slot"
+        :code="demoCode.labelSlot"
+      >
+        <p>Checkbox labels can be defined in <code>label</code> slot - that will allow to use HTML content.</p>
+
+        <DemoCheckboxLabelSlot />
+      </AppCardCode>
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 Inline text-field -->
+      <AppCardCode
+        title="Inline text-field"
+        :code="demoCode.inlineTextField"
+      >
+        <p>You can place <code>v-checkbox</code> in line with other components such as <code>v-text-field</code>.</p>
+
+        <DemoCheckboxInlineTextField />
+      </AppCardCode>
+    </VCol>
+  </VRow>
+</template>