vanilla-vue-ui 0.0.4 → 0.0.5

package/basic/container/WContainer.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+    <div class="mx-auto max-w-3xl">
+      <slot />
+    </div>
+  </div>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-vue-ui",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "private": false,
   "type": "module",
   "files": [

package/page-template/app-template/WAppTemplate.vue

@@ -1,13 +1,24 @@
 <template>
   <slot name="header"></slot>
 
-  <main>
-    <slot name="title"></slot>
+  <w-container>
+    <main>
+      <w-spacer-island>
+        <slot name="title"></slot>
+      </w-spacer-island>
 
-    <slot></slot>
-  </main>
+      <slot></slot>
+    </main>
 
-  <slot name="bottom"></slot>
+    <w-spacer-island>
+      <slot name="bottom"></slot>
+    </w-spacer-island>
+  </w-container>
 
   <slot name="footer"></slot>
 </template>
+
+<script setup lang="ts">
+import WContainer from '@/basic/container/WContainer.vue';
+import WSpacerIsland from '../../template/spacer-island/WSpacerIsland.vue'
+</script>

package/template/spacer-island/WSpacerIsland.stories.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import SpacerIsland from './WSpacerIsland.vue';
+
+const meta: Meta<typeof SpacerIsland> = {
+  component: SpacerIsland,
+};
+
+export default meta;
+type Story = StoryObj<typeof SpacerIsland>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: () => ({
+    components: { SpacerIsland },
+    template: '<SpacerIsland><p>content</p></SpacerIsland>',
+  }),
+};

package/template/spacer-island/WSpacerIsland.vue

@@ -0,0 +1,21 @@
+<template>
+  <div :class="classes.base">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ClassObject } from '../../types/ClassObject';
+import { defineProps, type PropType } from 'vue';
+
+defineProps({
+  classes: {
+    type: Object as PropType<ClassObject>,
+    default() {
+      return {
+        base: 'my-4 md:my-6 lg:my-10 xl:my-16'
+      }
+    }
+  }
+})
+</script>

package/template/spacer-ladder/WSpacerLadder.stories.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import SpacerLadder from './WSpacerLadder.vue';
+
+const meta: Meta<typeof SpacerLadder> = {
+  component: SpacerLadder,
+};
+
+export default meta;
+type Story = StoryObj<typeof SpacerLadder>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: () => ({
+    components: { SpacerLadder },
+    template: '<SpacerLadder><p>content</p></SpacerLadder>',
+  }),
+};

package/template/spacer-ladder/WSpacerLadder.vue

@@ -0,0 +1,21 @@
+<template>
+  <div :class="classes.base">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ClassObject } from '../../types/ClassObject';
+import { defineProps, type PropType } from 'vue';
+
+defineProps({
+  classes: {
+    type: Object as PropType<ClassObject>,
+    default() {
+      return {
+        base: 'my-2 md:my-4'
+      }
+    }
+  }
+})
+</script>

package/template/spacer-wrap/WSpacerWrap.stories.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import SpacerWrap from './WSpacerWrap.vue';
+
+const meta: Meta<typeof SpacerWrap> = {
+  component: SpacerWrap,
+};
+
+export default meta;
+type Story = StoryObj<typeof SpacerWrap>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: () => ({
+    components: { SpacerWrap },
+    template: '<SpacerWrap><p>content</p></SpacerWrap>',
+  }),
+};

package/template/spacer-wrap/WSpacerWrap.vue

@@ -0,0 +1,21 @@
+<template>
+  <div :class="classes.base">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ClassObject } from '../../types/ClassObject';
+import { defineProps, type PropType } from 'vue';
+
+defineProps({
+  classes: {
+    type: Object as PropType<ClassObject>,
+    default() {
+      return {
+        base: 'm-1 p-1'
+      }
+    }
+  }
+})
+</script>