@aerogel/cli 0.0.0-next.7b6199e0666e235c949739bdbc7cca2d54c8636e → 0.0.0-next.7f369b50c025aaa1a8024b6e53c659a6d7d617b5

package/templates/component-button-story/[component.name].story.vue

@@ -1,77 +0,0 @@
-<template>
-    <Story :layout="{ type: 'grid' }">
-        <Variant title="Playground">
-            <<% component.name %> :color="color">
-                {{ content }}
-            </<% component.name %>>
-
-            <template #controls>
-                <HstText v-model="content" title="Content" />
-                <HstSelect v-model="color" title="Color" :options="colorOptions" />
-            </template>
-        </Variant>
-
-        <Variant title="Default">
-            <<% component.name %>>
-                Click me!
-            </<% component.name %>>
-        </Variant>
-
-        <Variant title="Hover">
-            <<% component.name %> class=":hover">
-                Click me!
-            </<% component.name %>>
-        </Variant>
-
-        <Variant title="Focus">
-            <<% component.name %> class=":focus :focus-visible">
-                Click me!
-            </<% component.name %>>
-        </Variant>
-
-        <Variant title="Disabled">
-            <<% component.name %> disabled>
-                You can't click me
-            </<% component.name %>>
-        </Variant>
-
-        <Variant title="Colors" :layout="{ width: '300px' }">
-            <div class="flex items-center gap-2">
-                <<% component.name %> color="primary">
-                    Primary
-                </<% component.name %>>
-                <<% component.name %> color="secondary">
-                    Secondary
-                </<% component.name %>>
-                <<% component.name %> color="danger">
-                    Danger
-                </<% component.name %>>
-                <<% component.name %> color="clear">
-                    Clear
-                </<% component.name %>>
-            </div>
-        </Variant>
-    </Story>
-</template>
-
-<script setup lang="ts">
-import { Colors } from '@aerogel/core';
-import { invert } from '@noeldemartin/utils';
-import { ref } from 'vue';
-import type { Color } from '@aerogel/core';
-
-const content = ref('Click me!');
-const color = ref<Color>(Colors.Primary);
-const colorOptions = invert(Colors);
-</script>
-
-<style>
-.story-<% component.slug %> {
-    grid-template-columns: repeat(2, 300px) !important;
-}
-
-.story-<% component.slug %> .variant-playground,
-.story-<% component.slug %> .variant-colors{
-    grid-column: 1 / -1;
-}
-</style>

package/templates/component-checkbox/[component.name].vue

@@ -1,34 +0,0 @@
-<template>
-    <HeadlessInput
-        ref="$input"
-        :name="name"
-        :class="className"
-        :label="label"
-    >
-        <HeadlessInputInput
-            v-bind="attrs"
-            type="checkbox"
-        />
-        <div v-if="$slots.default">
-            <HeadlessInputLabel>
-                <slot />
-            </HeadlessInputLabel>
-            <HeadlessInputError />
-        </div>
-    </HeadlessInput>
-</template>
-
-<script setup lang="ts">
-import { HeadlessInputLabel, componentRef, stringProp, useInputAttrs } from '@aerogel/core';
-import type { IHeadlessInput } from '@aerogel/core';
-
-defineOptions({ inheritAttrs: false });
-defineProps({
-    name: stringProp(),
-    label: stringProp(),
-    inputClass: stringProp(''),
-});
-
-const $input = componentRef<IHeadlessInput>();
-const [attrs, className] = useInputAttrs();
-</script>

package/templates/component-checkbox-story/[component.name].story.vue

@@ -1,63 +0,0 @@
-<template>
-    <Story group="base" :layout="{ type: 'grid' }">
-        <Variant title="Playground">
-            <Form :form="form" class="m-1">
-                <<% component.name %> name="accept" :form="form">
-                    {{ label }}
-                </<% component.name %>>
-            </Form>
-
-            <template #controls>
-                <HstText v-model="label" title="Label" />
-            </template>
-        </Variant>
-
-        <Variant title="Default">
-            <<% component.name %> class="m-1">
-                Accept Terms & Conditions
-            </<% component.name %>>
-        </Variant>
-
-        <Variant title="Hover">
-            <<% component.name %> class="m-1" input-class=":hover">
-                Accept Terms & Conditions
-            </<% component.name %>>
-        </Variant>
-
-        <Variant title="Focus">
-            <<% component.name %> class="m-1" input-class=":focus :focus-visible">
-                Accept Terms & Conditions
-            </<% component.name %>>
-        </Variant>
-
-        <Variant title="Error">
-            <Form :form="errorForm" class="m-1">
-                <<% component.name %> name="accept">
-                    Accept Terms & Conditions
-                </<% component.name %>>
-            </Form>
-        </Variant>
-    </Story>
-</template>
-
-<script setup lang="ts">
-import { requiredBooleanInput, useForm } from '@aerogel/core';
-import { ref } from 'vue';
-
-const form = useForm({ accept: requiredBooleanInput(true) });
-const errorForm = useForm({ accept: requiredBooleanInput() });
-const label = ref('Accept Terms & Conditions');
-
-form.submit();
-errorForm.submit();
-</script>
-
-<style>
-.story-<% component.slug %> {
-    grid-template-columns: repeat(2, 300px) !important;
-}
-
-.story-<% component.slug %> .variant-playground {
-    grid-column: 1 / -1;
-}
-</style>

package/templates/component-input/[component.name].vue

@@ -1,17 +0,0 @@
-<template>
-    <HeadlessInput v-bind="props">
-        <HeadlessInputLabel />
-        <HeadlessInputInput v-bind="attrs" />
-        <HeadlessInputDescription />
-        <HeadlessInputError />
-    </HeadlessInput>
-</template>
-
-<script setup lang="ts">
-import { useInputAttrs, useInputProps } from '@aerogel/core';
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps(useInputProps());
-const [attrs] = useInputAttrs();
-</script>

package/templates/component-input-story/[component.name].story.vue

@@ -1,63 +0,0 @@
-<template>
-    <Story :layout="{ type: 'grid' }">
-        <Variant title="Playground">
-            <Form :form="form">
-                <<% component.name %> name="food" :label="label" :placeholder="placeholder" />
-            </Form>
-
-            <template #controls>
-                <HstText v-model="label" title="Label" />
-                <HstText v-model="placeholder" title="Placeholder" />
-                <HstCheckbox v-model="hasErrors" title="Errors" />
-            </template>
-        </Variant>
-
-        <Variant title="Default">
-            <<% component.name %> label="What's the best food?" placeholder="Ramen" />
-        </Variant>
-
-        <Variant title="Hover">
-            <<% component.name %> label="What's the best food?" placeholder="Ramen" input-class=":hover" />
-        </Variant>
-
-        <Variant title="Focus">
-            <<% component.name %> label="What's the best food?" placeholder="Ramen" input-class=":focus :focus-visible" />
-        </Variant>
-
-        <Variant title="Error">
-            <Form :form="errorForm">
-                <<% component.name %>
-                    name="food"
-                    label="What's the best food?"
-                    placeholder="Ramen"
-                    class=":focus :focus-visible"
-                />
-            </Form>
-        </Variant>
-    </Story>
-</template>
-
-<script setup lang="ts">
-import { requiredStringInput, useForm } from '@aerogel/core';
-import { ref, watchEffect } from 'vue';
-
-const form = useForm({ food: requiredStringInput() });
-const errorForm = useForm({ food: requiredStringInput() });
-const label = ref('What\'s the best food?');
-const placeholder = ref('Ramen');
-const hasErrors = ref(false);
-
-errorForm.submit();
-
-watchEffect(() => (hasErrors.value ? form.submit() : form.reset()));
-</script>
-
-<style>
-.story-<% component.slug %> {
-    grid-template-columns: repeat(2, 300px) !important;
-}
-
-.story-<% component.slug %> .variant-playground {
-    grid-column: 1 / -1;
-}
-</style>

package/templates/component-story/[component.name].story.vue

@@ -1,7 +0,0 @@
-<template>
-    <Story>
-        <Variant title="Primary">
-            <<% component.name %> />
-        </Variant>
-    </Story>
-</template>