@dejwcake/craftable 2.0.2 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dejwcake/craftable",
-  "version": "2.0.2",
+  "version": "2.1.1",
   "description": "This is a frontend dependency for Craftable. Craftable is a Laravel-based open-source toolkit for building administration interfaces.",
   "type": "module",
   "main": "./dist/index.cjs",

package/scss/overrides/_checkboxes.scss

@@ -79,3 +79,15 @@
 label:hover::before {
     border: 1px solid $primary !important;
 }
+
+/* Inline switch: no float or reserved gutter, so it sits where it is placed -- in a listing cell,
+   a detail row, or anywhere else. Bootstrap otherwise pulls the input back over the preceding
+   column. */
+.form-switch.form-switch-inline {
+    padding-left: 0;
+
+    .form-check-input {
+        margin-left: 0;
+        float: none;
+    }
+}

package/scss/overrides/_tables.scss

@@ -39,15 +39,9 @@ td > .switch {
 .table-listing td .form-switch.form-switch-inline {
     display: flex;
     justify-content: center;
-    padding-left: 0;
     min-width: 2.5em;
 }
 
-.table-listing td .form-switch.form-switch-inline .form-check-input {
-    margin-left: 0;
-    float: none;
-}
-
 @media (width <= 991px) {
     .table-listing {
         th,

package/src/components/ReadOnlySwitch.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="form-check form-switch form-switch-inline">
+        <input
+            class="form-check-input"
+            :class="switchClass"
+            type="checkbox"
+            role="switch"
+            :checked="!!modelValue"
+            disabled
+        />
+    </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    modelValue: { type: [Boolean, Number, String], default: false },
+    variant: { type: String, default: 'success' },
+});
+
+const switchClass = computed(() => `form-switch-${props.variant}`);
+</script>

package/src/components/show/ShowRow.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="mb-3 row align-items-center">
+        <label class="col-md-3 col-form-label text-md-end">{{ label }}</label>
+        <div class="col-md-9 col-xl-8">
+            <slot>
+                <span>{{ value }}</span>
+            </slot>
+        </div>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    label: { type: String, required: true },
+    value: { type: [String, Number, Boolean], default: '' },
+});
+</script>

package/src/index.js

@@ -26,6 +26,9 @@ export { default as EditButton } from './components/listing/EditButton.vue';
 export { default as DeleteButton } from './components/listing/DeleteButton.vue';
 export { default as ConfirmModal } from './components/ConfirmModal.vue';
 export { default as ToggleSwitch } from './components/listing/ToggleSwitch.vue';
+export { default as ReadOnlySwitch } from './components/ReadOnlySwitch.vue';
+
+export { default as ShowRow } from './components/show/ShowRow.vue';
 
 // Form components
 export { default as FormInput } from './components/form/FormInput.vue';