first commit

resources/js/pages/components/chip.vue

@@ -0,0 +1,157 @@
+<script setup>
+import * as demoCode from '@/views/demos/components/chip/demoCodeChip'
+</script>
+
+<template>
+  <VRow class="match-height">
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 Color -->
+      <AppCardCode
+        title="Color"
+        :code="demoCode.color"
+      >
+        <p>Use <code>color</code> prop to change the background color of chips.</p>
+
+        <DemoChipColor />
+      </AppCardCode>
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 Elevated -->
+      <AppCardCode
+        title="Elevated"
+        :code="demoCode.elevated"
+      >
+        <p>Use <code>elevated</code> variant option to create filled chips.</p>
+
+        <DemoChipElevated />
+      </AppCardCode>
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 Outlined -->
+      <AppCardCode
+        title="Outlined"
+        :code="demoCode.outlined"
+      >
+        <p>Use <code>outlined</code> variant option to create outline border chips.</p>
+
+        <DemoChipOutlined />
+      </AppCardCode>
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 Label -->
+      <AppCardCode
+        title="Label"
+        :code="demoCode.label"
+      >
+        <p>Label chips use the <code>v-card</code> border-radius. Use <code>label</code> prop to create label chips.</p>
+
+        <DemoChipLabel />
+      </AppCardCode>
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 Closable -->
+      <AppCardCode
+        title="Closable"
+        :code="demoCode.closable"
+      >
+        <p>Closable chips can be controlled with a <code>v-model</code>.</p>
+
+        <DemoChipClosable />
+      </AppCardCode>
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 Chip With Icon -->
+      <AppCardCode
+        title="With Icon"
+        :code="demoCode.withIcon"
+      >
+        <p>Chips can use text or any icon available in the Material Icons font library.</p>
+
+        <DemoChipWithIcon />
+      </AppCardCode>
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 Avatar -->
+      <AppCardCode
+        title="With Avatar"
+        :code="demoCode.withAvatar"
+      >
+        <p>Use <code>pill</code> prop to remove the <code>v-avatar</code> padding.</p>
+
+        <DemoChipWithAvatar />
+      </AppCardCode>
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 Sizes -->
+      <AppCardCode
+        title="Sizes"
+        :code="demoCode.sizes"
+      >
+        <p>The <code>v-chip</code> component can have various sizes from <code>x-small</code> to <code>x-large</code>.</p>
+
+        <DemoChipSizes />
+      </AppCardCode>
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 In Selects -->
+      <AppCardCode
+        title="In Selects"
+        :code="demoCode.inSelects"
+      >
+        <p>Selects can use <code>chips</code> to display the selected data. Try adding your own tags below.</p>
+
+        <DemoChipInSelects />
+      </AppCardCode>
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="6"
+    >
+      <!-- 👉 Expandable -->
+      <AppCardCode
+        title="Expandable"
+        :code="demoCode.expandable"
+      >
+        <p>Chips can be combined with <code>v-menu</code> to enable a specific set of actions for a chip.</p>
+
+        <DemoChipExpandable />
+      </AppCardCode>
+    </VCol>
+  </VRow>
+</template>