1,567th Commit

app/src/routes/(backstage)/(library)/data-entry/selects/tree-select/+page.vue

@@ -3,6 +3,8 @@ import { ref } from 'vue';
 import { XBreadcrumb, XButton, XCard, XTreeSelect } from '@x/ui';
 
 import WithinPopover from './WithinPopover.vue';
+import WithinTableCell from './WithinTableCell.vue';
+import WithinTableCellWithinDialog from './WithinTableCellWithinDialog.vue';
 
 const values = ref<string[]>([]);
 
@@ -155,4 +157,20 @@ const values2 = ref<string[]>([]);
       <WithinPopover />
     </XCard>
   </section>
+
+  <section class="my-8">
+    <h2 class="text-3xl font-bold my-4 pt-6">Within TableCell</h2>
+
+    <XCard>
+      <WithinTableCell />
+    </XCard>
+  </section>
+
+  <section class="my-8">
+    <h2 class="text-3xl font-bold my-4 pt-6">Within TableCell within Dialog</h2>
+
+    <XCard>
+      <WithinTableCellWithinDialog />
+    </XCard>
+  </section>
 </template>

app/src/routes/(backstage)/(library)/data-entry/selects/tree-select/WithinPopover.vue

@@ -1,87 +1,19 @@
 <script lang="ts" setup>
-import { reactive } from 'vue';
+import { ref } from 'vue';
 import { XButton, XCard, XPopover, XTreeSelect } from '@x/ui';
 
-const flux = reactive({
-  popoverStatus: false,
-  select: [],
-  select1Options: [
-    {
-      label: '1',
-      value: '1',
-      children: [
-        {
-          label: '1-1',
-          value: '1-1',
-          children: [
-            { label: '1-1-1', value: '1-1-1' },
-            { label: '1-1-2', value: '1-1-2' },
-          ],
-        },
-        {
-          label: '1-2',
-          value: '1-2',
-          children: [
-            { label: '1-2-1', value: '1-2-1' },
-            { label: '1-2-2', value: '1-2-2' },
-          ],
-        },
-        {
-          label: '1-3',
-          value: '1-3',
-          children: [
-            { label: '1-3-1', value: '1-3-1' },
-            {
-              label: '1-3-2',
-              value: '1-3-2',
-              children: [
-                { label: '1-3-2-1', value: '1-3-2-1' },
-                { label: '1-3-2-2', value: '1-3-2-2' },
-              ],
-            },
-            { label: '1-3-3', value: '1-3-3' },
-          ],
-        },
-      ],
-    },
-    {
-      label: '2',
-      value: '2',
-      children: [
-        {
-          label: '2-1',
-          value: '2-1',
-          children: [
-            {
-              label: '2-1-1',
-              value: '2-1-1',
-              children: [
-                { label: '2-1-1-1', value: '2-1-1-1' },
-                { label: '2-1-1-2', value: '2-1-1-2' },
-              ],
-            },
-            { label: '2-1-2', value: '2-1-2' },
-          ],
-        },
-        { label: '2-2', value: '2-2' },
-      ],
-    },
-    { label: '3', value: '3' },
-  ],
-});
+import options from './options';
+
+const selected = ref<string[]>([]);
 </script>
 
 <template>
-  <XPopover v-model="flux.popoverStatus">
-    <XButton label="Launch" @click="flux.popoverStatus = true" />
+  <XPopover>
+    <XButton label="Launch" />
 
     <template #content>
       <XCard class="w-xs">
-        <XTreeSelect
-          v-model:value="flux.select"
-          label="Example label"
-          :options="flux.select1Options"
-        />
+        <XTreeSelect v-model:value="selected" label="Example label" :options />
       </XCard>
     </template>
   </XPopover>

app/src/routes/(backstage)/(library)/data-entry/selects/tree-select/WithinTableCell.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { XTable, XTreeSelect } from '@x/ui';
+
+import options from './options';
+
+const selected = ref<string[]>([]);
+</script>
+
+<template>
+  <XTable
+    :columns="[
+      { key: 'A', name: 'Layout' },
+      { key: 'B', name: 'Flexbox & Grid' },
+      { key: 'C', name: 'Spacing' },
+      { key: 'D', name: 'Sizing' },
+      { key: 'E', name: 'Typography' },
+      { key: 'F', name: 'Backgrounds' },
+      { key: 'G', name: 'Borders' },
+      { key: 'H', name: 'Effects' },
+      { key: 'I', name: 'Filters' },
+      { key: 'J', name: 'Tables' },
+      { key: 'K', name: 'Transitions & Animation' },
+      { key: 'L', name: 'Transforms' },
+      { key: 'M', name: 'Interactivity' },
+      { key: 'N', name: 'SVG' },
+      { key: 'O', name: 'Accessibility' },
+    ]"
+    :rows="[
+      {
+        A: 'Aspect Ratio',
+        B: 'Flex Basis',
+        C: 'Padding',
+        D: 'Width',
+        E: 'Font Family',
+        F: 'Background Attachment',
+        G: 'Border Radius',
+        H: 'Box Shadow',
+        I: 'Blur',
+        J: 'Border Collapse',
+        K: 'Transition Property',
+        L: 'Scale',
+        M: 'Accent Color',
+        N: 'Fill',
+        O: 'Screen Readers',
+      },
+    ]"
+  >
+    <template #D>
+      <div class="w-64 py-1">
+        <XTreeSelect v-model:value="selected" :options />
+      </div>
+    </template>
+  </XTable>
+</template>

app/src/routes/(backstage)/(library)/data-entry/selects/tree-select/WithinTableCellWithinDialog.vue

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { XButton, XDialog, XDivider, XTable, XTreeSelect } from '@x/ui';
+
+import options from './options';
+
+const status = ref(false);
+const selected = ref<string[]>([]);
+const more = ref(false);
+</script>
+
+<template>
+  <XButton label="Launch" @click="status = true" />
+
+  <XDialog v-model="status" title="TreeSelect within TableCell within Dialog">
+    <XTable
+      :columns="[
+        { key: 'A', name: 'Layout' },
+        { key: 'B', name: 'Flexbox & Grid' },
+        { key: 'C', name: 'Spacing' },
+        { key: 'D', name: 'Sizing' },
+        { key: 'E', name: 'Typography' },
+        { key: 'F', name: 'Backgrounds' },
+        { key: 'G', name: 'Borders' },
+        { key: 'H', name: 'Effects' },
+        { key: 'I', name: 'Filters' },
+        { key: 'J', name: 'Tables' },
+        { key: 'K', name: 'Transitions & Animation' },
+        { key: 'L', name: 'Transforms' },
+        { key: 'M', name: 'Interactivity' },
+        { key: 'N', name: 'SVG' },
+        { key: 'O', name: 'Accessibility' },
+      ]"
+      :rows="[
+        {
+          A: 'Aspect Ratio',
+          B: 'Flex Basis',
+          C: 'Padding',
+          D: 'Width',
+          E: 'Font Family',
+          F: 'Background Attachment',
+          G: 'Border Radius',
+          H: 'Box Shadow',
+          I: 'Blur',
+          J: 'Border Collapse',
+          K: 'Transition Property',
+          L: 'Scale',
+          M: 'Accent Color',
+          N: 'Fill',
+          O: 'Screen Readers',
+        },
+      ]"
+    >
+      <template #D>
+        <div class="w-64 py-1">
+          <XTreeSelect v-model:value="selected" :options />
+        </div>
+      </template>
+    </XTable>
+
+    <XDivider />
+
+    <XButton color="info" @click="more = !more">More</XButton>
+
+    <div v-if="more" class="flex flex-col gap-4 mt-4">
+      <p v-for="num in 5" :key="num">
+        {{ num }}. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
+        Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
+        printer took a galley of type and scrambled it to make a type specimen book. It has survived
+        not only five centuries, but also the leap into electronic typesetting, remaining
+        essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
+        containing Lorem Ipsum passages, and more recently with desktop publishing software like
+        Aldus PageMaker including versions of Lorem Ipsum.
+      </p>
+    </div>
+  </XDialog>
+</template>

app/src/routes/(backstage)/(library)/data-entry/selects/tree-select/options.ts

@@ -0,0 +1,63 @@
+export default [
+  {
+    label: '1',
+    value: '1',
+    children: [
+      {
+        label: '1-1',
+        value: '1-1',
+        children: [
+          { label: '1-1-1', value: '1-1-1' },
+          { label: '1-1-2', value: '1-1-2' },
+        ],
+      },
+      {
+        label: '1-2',
+        value: '1-2',
+        children: [
+          { label: '1-2-1', value: '1-2-1' },
+          { label: '1-2-2', value: '1-2-2' },
+        ],
+      },
+      {
+        label: '1-3',
+        value: '1-3',
+        children: [
+          { label: '1-3-1', value: '1-3-1' },
+          {
+            label: '1-3-2',
+            value: '1-3-2',
+            children: [
+              { label: '1-3-2-1', value: '1-3-2-1' },
+              { label: '1-3-2-2', value: '1-3-2-2' },
+            ],
+          },
+          { label: '1-3-3', value: '1-3-3' },
+        ],
+      },
+    ],
+  },
+  {
+    label: '2',
+    value: '2',
+    children: [
+      {
+        label: '2-1',
+        value: '2-1',
+        children: [
+          {
+            label: '2-1-1',
+            value: '2-1-1',
+            children: [
+              { label: '2-1-1-1', value: '2-1-1-1' },
+              { label: '2-1-1-2', value: '2-1-1-2' },
+            ],
+          },
+          { label: '2-1-2', value: '2-1-2' },
+        ],
+      },
+      { label: '2-2', value: '2-2' },
+    ],
+  },
+  { label: '3', value: '3' },
+];

ui/src/components/dialog/Dialog.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { nextTick, ref, watch, onUnmounted } from 'vue';
+import { nextTick, ref, watch, onUnmounted, provide } from 'vue';
 import { useResizeObserver } from '@vueuse/core';
 
 import Bounce from '../bounce/Bounce.vue';
@@ -47,6 +47,10 @@ onUnmounted(() => {
     closeDialog();
   }
 });
+
+provide('Dialog', {
+  withinDialog: true,
+});
 </script>
 
 <template>