cisse-vue-ui 0.1.9 → 0.2.0

package/README.md

@@ -92,7 +92,9 @@ app.use(VueTailwindUI, { components: ['Button', 'CardComponent'] })
 |-----------|-------------|
 | `Button` | Button with variants (primary, secondary, outline, ghost, danger, success), sizes, icons, loading state |
 | `CardComponent` | Card container with header, content, and footer slots |
-| `TableComponent` | Data table with sorting, actions, and custom column rendering |
+| `TableComponent` | Data table with sorting, selection, actions, and custom column rendering |
+| `MobileList` | Mobile-optimized card-based list with selection support |
+| `ResponsiveList` | Combines MobileList (mobile) and TableComponent (desktop) with automatic breakpoint switching |
 | `Tabs` | Tab navigation with variants (underline, pills, boxed) |
 | `TabPanel` | Tab content panel (use with Tabs) |
 | `Dropdown` | Dropdown menu with items, icons, and dividers |
@@ -339,27 +341,41 @@ const steps = [
 
 ```vue
 <script setup>
+import { ref } from 'vue'
 import { TableComponent } from 'cisse-vue-ui'
 
 const properties = [
-  { key: 'name', label: 'Name', sortable: true },
-  { key: 'email', label: 'Email' },
-  { key: 'role', label: 'Role', type: 'badge' }
+  { name: 'name', label: 'Name', main: true },
+  { name: 'email', label: 'Email' },
+  { name: 'role', label: 'Role', type: 'badge' }
 ]
 
-const data = [
+const items = [
   { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
   { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' }
 ]
+
+// Selection support
+const selectedItems = ref(new Set())
+const toggleSelect = (id) => {
+  if (selectedItems.value.has(id)) {
+    selectedItems.value.delete(id)
+  } else {
+    selectedItems.value.add(id)
+  }
+}
 </script>
 
 <template>
   <TableComponent
     :properties="properties"
-    :data="data"
-    :loading="false"
+    :items="items"
+    selectable
+    :selected-items="selectedItems"
+    @select="toggleSelect"
+    @select-all="toggleSelectAll"
   >
-    <template #actions="{ item }">
+    <template #action="{ item }">
       <TableAction icon="lucide:edit" @click="edit(item)" />
       <TableAction icon="lucide:trash" variant="danger" @click="delete(item)" />
     </template>
@@ -367,6 +383,144 @@ const data = [
 </template>
 ```
 
+### ResponsiveList
+
+A component that automatically switches between a mobile card layout and a desktop table layout based on screen size.
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { ResponsiveList } from 'cisse-vue-ui'
+
+const columns = [
+  { key: 'name', label: 'Name' },
+  { key: 'email', label: 'Email' },
+  { key: 'status', label: 'Status' }
+]
+
+const items = [
+  { id: 1, name: 'John Doe', email: 'john@example.com', status: 'active' },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'inactive' }
+]
+
+const selectedItems = ref(new Set())
+
+const toggleSelect = (id) => {
+  if (selectedItems.value.has(id)) {
+    selectedItems.value.delete(id)
+  } else {
+    selectedItems.value.add(id)
+  }
+}
+
+const toggleSelectAll = () => {
+  if (selectedItems.value.size === items.length) {
+    selectedItems.value.clear()
+  } else {
+    items.forEach(item => selectedItems.value.add(String(item.id)))
+  }
+}
+</script>
+
+<template>
+  <ResponsiveList
+    :items="items"
+    :columns="columns"
+    key-field="id"
+    selectable
+    :selected-items="selectedItems"
+    breakpoint="lg"
+    @select="toggleSelect"
+    @select-all="toggleSelectAll"
+  >
+    <!-- Mobile view: avatar -->
+    <template #avatar="{ item }">
+      <div class="w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center text-white">
+        {{ item.name[0] }}
+      </div>
+    </template>
+
+    <!-- Mobile view: content -->
+    <template #mobileContent="{ item }">
+      <h3 class="font-semibold">{{ item.name }}</h3>
+      <p class="text-sm text-gray-500">{{ item.email }}</p>
+    </template>
+
+    <!-- Mobile view: actions -->
+    <template #mobileActions="{ item }">
+      <button @click="viewItem(item)">View</button>
+    </template>
+
+    <!-- Desktop table: custom cell rendering -->
+    <template #cell-name="{ item }">
+      <span class="font-medium">{{ item.name }}</span>
+    </template>
+
+    <template #cell-status="{ item }">
+      <span :class="item.status === 'active' ? 'text-green-600' : 'text-red-600'">
+        {{ item.status }}
+      </span>
+    </template>
+
+    <!-- Desktop table: actions column -->
+    <template #actions="{ item }">
+      <Button size="sm" variant="ghost" @click="edit(item)">Edit</Button>
+    </template>
+
+    <!-- Empty state -->
+    <template #empty>
+      <EmptyState title="No items" message="No items to display" />
+    </template>
+  </ResponsiveList>
+</template>
+```
+
+#### ResponsiveList Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `Array` | required | Array of items to display |
+| `columns` | `Array` | required | Column definitions with `key` or `name`, `label`, and optional `type` |
+| `keyField` | `string` | `'id'` | Field to use as unique key for items |
+| `selectable` | `boolean` | `false` | Enable selection mode |
+| `selectedItems` | `Set<string>` | - | Set of selected item keys |
+| `selectableFilter` | `Function` | - | Filter function to determine if an item is selectable |
+| `breakpoint` | `string` | `'lg'` | Breakpoint for switching views: `'sm'`, `'md'`, `'lg'`, `'xl'`, `'2xl'` |
+
+### MobileList
+
+A mobile-optimized card-based list component with selection support.
+
+```vue
+<script setup>
+import { MobileList } from 'cisse-vue-ui'
+</script>
+
+<template>
+  <MobileList
+    :items="items"
+    key-field="id"
+    selectable
+    :selected-items="selectedItems"
+    @select="toggleSelect"
+    @select-all="toggleSelectAll"
+  >
+    <template #avatar="{ item }">
+      <div class="w-12 h-12 rounded-full bg-blue-500" />
+    </template>
+
+    <template #content="{ item }">
+      <h3>{{ item.name }}</h3>
+      <p>{{ item.description }}</p>
+    </template>
+
+    <template #actions="{ item }">
+      <button>View</button>
+    </template>
+  </MobileList>
+</template>
+```
+
 ### MenuItem
 
 ```vue

package/dist/Checkbox.vue_vue_type_script_setup_true_lang-B-nLCCNY.js

@@ -0,0 +1,54 @@
+import { defineComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, toDisplayString } from "vue";
+const _hoisted_1 = ["checked", "disabled", "indeterminate"];
+const _hoisted_2 = {
+  key: 0,
+  class: "flex flex-col"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "text-sm font-medium text-gray-900 dark:text-white"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "text-sm text-gray-500 dark:text-gray-400"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Checkbox",
+  props: {
+    modelValue: { type: Boolean, default: false },
+    label: {},
+    description: {},
+    disabled: { type: Boolean },
+    indeterminate: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const toggle = (event) => {
+      const target = event.target;
+      emit("update:modelValue", target.checked);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("label", {
+        class: normalizeClass(["inline-flex items-start gap-3", __props.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"])
+      }, [
+        createElementVNode("input", {
+          type: "checkbox",
+          checked: __props.modelValue,
+          disabled: __props.disabled,
+          indeterminate: __props.indeterminate,
+          class: "mt-0.5 size-4 rounded border-gray-300 text-primary/90 focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:cursor-not-allowed dark:border-gray-600 dark:bg-gray-800 dark:focus:ring-offset-gray-900",
+          onChange: toggle
+        }, null, 40, _hoisted_1),
+        __props.label || __props.description ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          __props.label ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
+          __props.description ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.description), 1)) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};
+//# sourceMappingURL=Checkbox.vue_vue_type_script_setup_true_lang-B-nLCCNY.js.map

package/dist/Checkbox.vue_vue_type_script_setup_true_lang-B-nLCCNY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.vue_vue_type_script_setup_true_lang-B-nLCCNY.js","sources":["../src/components/form/Checkbox.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nwithDefaults(\n  defineProps<{\n    /** v-model value */\n    modelValue?: boolean\n    /** Label text */\n    label?: string\n    /** Description text */\n    description?: string\n    /** Disabled state */\n    disabled?: boolean\n    /** Indeterminate state */\n    indeterminate?: boolean\n  }>(),\n  {\n    modelValue: false,\n  },\n)\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: boolean]\n}>()\n\nconst toggle = (event: Event) => {\n  const target = event.target as HTMLInputElement\n  emit('update:modelValue', target.checked)\n}\n</script>\n\n<template>\n  <label\n    class=\"inline-flex items-start gap-3\"\n    :class=\"disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'\"\n  >\n    <input\n      type=\"checkbox\"\n      :checked=\"modelValue\"\n      :disabled=\"disabled\"\n      :indeterminate=\"indeterminate\"\n      class=\"mt-0.5 size-4 rounded border-gray-300 text-primary/90 focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:cursor-not-allowed dark:border-gray-600 dark:bg-gray-800 dark:focus:ring-offset-gray-900\"\n      @change=\"toggle\"\n    />\n    <div v-if=\"label || description\" class=\"flex flex-col\">\n      <span v-if=\"label\" class=\"text-sm font-medium text-gray-900 dark:text-white\">\n        {{ label }}\n      </span>\n      <span v-if=\"description\" class=\"text-sm text-gray-500 dark:text-gray-400\">\n        {{ description }}\n      </span>\n    </div>\n  </label>\n</template>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_openBlock","_toDisplayString"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,UAAM,OAAO;AAIb,UAAM,SAAS,CAAC,UAAiB;AAC/B,YAAM,SAAS,MAAM;AACrB,WAAK,qBAAqB,OAAO,OAAO;AAAA,IAC1C;;0BAIEA,mBAoBQ,SAAA;AAAA,QAnBN,OAAKC,eAAA,CAAC,iCACE,QAAA,WAAQ,kCAAA,gBAAA,CAAA;AAAA,MAAA;QAEhBC,mBAOE,SAAA;AAAA,UANA,MAAK;AAAA,UACJ,SAAS,QAAA;AAAA,UACT,UAAU,QAAA;AAAA,UACV,eAAe,QAAA;AAAA,UAChB,OAAM;AAAA,UACL,UAAQ;AAAA,QAAA;QAEA,QAAA,SAAS,QAAA,eAApBC,aAAAH,mBAOM,OAPN,YAOM;AAAA,UANQ,QAAA,sBAAZA,mBAEO,QAFP,YAEOI,gBADF,QAAA,KAAK,GAAA,CAAA;UAEE,QAAA,4BAAZJ,mBAEO,QAFP,YAEOI,gBADF,QAAA,WAAW,GAAA,CAAA;;;;;;"}

package/dist/Checkbox.vue_vue_type_script_setup_true_lang-DIoHDji4.cjs

@@ -0,0 +1,53 @@
+"use strict";
+const vue = require("vue");
+const _hoisted_1 = ["checked", "disabled", "indeterminate"];
+const _hoisted_2 = {
+  key: 0,
+  class: "flex flex-col"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "text-sm font-medium text-gray-900 dark:text-white"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "text-sm text-gray-500 dark:text-gray-400"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "Checkbox",
+  props: {
+    modelValue: { type: Boolean, default: false },
+    label: {},
+    description: {},
+    disabled: { type: Boolean },
+    indeterminate: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const toggle = (event) => {
+      const target = event.target;
+      emit("update:modelValue", target.checked);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("label", {
+        class: vue.normalizeClass(["inline-flex items-start gap-3", __props.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"])
+      }, [
+        vue.createElementVNode("input", {
+          type: "checkbox",
+          checked: __props.modelValue,
+          disabled: __props.disabled,
+          indeterminate: __props.indeterminate,
+          class: "mt-0.5 size-4 rounded border-gray-300 text-primary/90 focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:cursor-not-allowed dark:border-gray-600 dark:bg-gray-800 dark:focus:ring-offset-gray-900",
+          onChange: toggle
+        }, null, 40, _hoisted_1),
+        __props.label || __props.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+          __props.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, vue.toDisplayString(__props.label), 1)) : vue.createCommentVNode("", true),
+          __props.description ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, vue.toDisplayString(__props.description), 1)) : vue.createCommentVNode("", true)
+        ])) : vue.createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+exports._sfc_main = _sfc_main;
+//# sourceMappingURL=Checkbox.vue_vue_type_script_setup_true_lang-DIoHDji4.cjs.map

package/dist/Checkbox.vue_vue_type_script_setup_true_lang-DIoHDji4.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.vue_vue_type_script_setup_true_lang-DIoHDji4.cjs","sources":["../src/components/form/Checkbox.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nwithDefaults(\n  defineProps<{\n    /** v-model value */\n    modelValue?: boolean\n    /** Label text */\n    label?: string\n    /** Description text */\n    description?: string\n    /** Disabled state */\n    disabled?: boolean\n    /** Indeterminate state */\n    indeterminate?: boolean\n  }>(),\n  {\n    modelValue: false,\n  },\n)\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: boolean]\n}>()\n\nconst toggle = (event: Event) => {\n  const target = event.target as HTMLInputElement\n  emit('update:modelValue', target.checked)\n}\n</script>\n\n<template>\n  <label\n    class=\"inline-flex items-start gap-3\"\n    :class=\"disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'\"\n  >\n    <input\n      type=\"checkbox\"\n      :checked=\"modelValue\"\n      :disabled=\"disabled\"\n      :indeterminate=\"indeterminate\"\n      class=\"mt-0.5 size-4 rounded border-gray-300 text-primary/90 focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:cursor-not-allowed dark:border-gray-600 dark:bg-gray-800 dark:focus:ring-offset-gray-900\"\n      @change=\"toggle\"\n    />\n    <div v-if=\"label || description\" class=\"flex flex-col\">\n      <span v-if=\"label\" class=\"text-sm font-medium text-gray-900 dark:text-white\">\n        {{ label }}\n      </span>\n      <span v-if=\"description\" class=\"text-sm text-gray-500 dark:text-gray-400\">\n        {{ description }}\n      </span>\n    </div>\n  </label>\n</template>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_openBlock","_toDisplayString"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,UAAM,OAAO;AAIb,UAAM,SAAS,CAAC,UAAiB;AAC/B,YAAM,SAAS,MAAM;AACrB,WAAK,qBAAqB,OAAO,OAAO;AAAA,IAC1C;;8BAIEA,IAAAA,mBAoBQ,SAAA;AAAA,QAnBN,OAAKC,IAAAA,eAAA,CAAC,iCACE,QAAA,WAAQ,kCAAA,gBAAA,CAAA;AAAA,MAAA;QAEhBC,IAAAA,mBAOE,SAAA;AAAA,UANA,MAAK;AAAA,UACJ,SAAS,QAAA;AAAA,UACT,UAAU,QAAA;AAAA,UACV,eAAe,QAAA;AAAA,UAChB,OAAM;AAAA,UACL,UAAQ;AAAA,QAAA;QAEA,QAAA,SAAS,QAAA,eAApBC,IAAAA,aAAAH,IAAAA,mBAOM,OAPN,YAOM;AAAA,UANQ,QAAA,0BAAZA,IAAAA,mBAEO,QAFP,YAEOI,IAAAA,gBADF,QAAA,KAAK,GAAA,CAAA;UAEE,QAAA,gCAAZJ,IAAAA,mBAEO,QAFP,YAEOI,IAAAA,gBADF,QAAA,WAAW,GAAA,CAAA;;;;;;;"}