@indielayer/ui 1.3.0 → 1.5.0

package/docs/pages/component/tabs/usage.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const tab = ref('a')
+const linkTab = ref(null)
+</script>
+
+<template>
+  <x-tab-group v-model="tab" class="pb-10" variant="line" :full-width="false">
+    <x-tab value="a" label="Tab A" icon="smile">
+      content a
+    </x-tab>
+    <x-tab value="b" label="Tab B">
+      content b
+    </x-tab>
+    <x-tab value="c" label="Tab c">
+      content c
+    </x-tab>
+    <x-tab value="d" label="Tab d">
+      content d
+    </x-tab>
+    <x-tab value="e" label="Tab e">
+      content e
+    </x-tab>
+  </x-tab-group>
+  <x-tab-group
+    v-model="tab"
+    class="pb-10"
+    variant="line"
+    grow
+  >
+    <x-tab value="a" label="Tab A">
+      content a
+    </x-tab>
+    <x-tab value="b" label="Tab B">
+      content b
+    </x-tab>
+    <x-tab value="c" label="Tab c">
+      content c
+    </x-tab>
+    <x-tab value="d" label="Tab d">
+      content d
+    </x-tab>
+    <x-tab value="e" label="Tab e">
+      content e
+    </x-tab>
+  </x-tab-group>
+  <x-tab-group v-model="tab" class="pb-10" variant="line" ghost>
+    <x-tab value="a" label="Tab A">
+      content a
+    </x-tab>
+    <x-tab value="b" label="Tab B">
+      content b
+    </x-tab>
+    <x-tab value="c" label="Tab c">
+      content c
+    </x-tab>
+    <x-tab value="d" label="Tab d">
+      content d
+    </x-tab>
+    <x-tab value="e" label="Tab e">
+      content e
+    </x-tab>
+  </x-tab-group>
+  <x-tab-group
+    v-model="tab"
+    class="pb-10"
+    variant="block"
+    grow
+  >
+    <x-tab value="a" label="Tab A">
+      content a
+    </x-tab>
+    <x-tab value="b" label="Tab B">
+      content b
+    </x-tab>
+    <x-tab value="c" label="Tab c">
+      content c
+    </x-tab>
+    <x-tab value="d" label="Tab d">
+      content d
+    </x-tab>
+    <x-tab value="e" label="Tab e">
+      content e
+    </x-tab>
+  </x-tab-group>
+  <x-tab-group
+    v-model="tab"
+    class="pb-10"
+    variant="block"
+    grow
+    :full-width="false"
+  >
+    <x-tab value="a" label="Tab A" removable>
+      content a
+    </x-tab>
+    <x-tab value="b" label="Tab B" icon="smile">
+      content b
+    </x-tab>
+    <x-tab value="c" label="Tab c">
+      content c
+    </x-tab>
+    <x-tab value="d" label="Tab d">
+      content d
+    </x-tab>
+    <x-tab value="e" label="Tab e">
+      content e
+    </x-tab>
+  </x-tab-group>
+  <x-tab-group
+    v-model="tab"
+    class="pb-10"
+    variant="block"
+    ghost
+  >
+    <x-tab value="a" label="Tab A">
+      content a
+    </x-tab>
+    <x-tab value="b" label="Tab B">
+      content b
+    </x-tab>
+    <x-tab value="c" label="Tab c">
+      content c
+    </x-tab>
+    <x-tab value="d" label="Tab d">
+      content d
+    </x-tab>
+    <x-tab value="e" label="Tab e">
+      content e
+    </x-tab>
+  </x-tab-group>
+
+  <p>Automatic link as value</p>
+  <x-tab-group v-model="linkTab" class="pb-10" exact>
+    <x-tab to="/component/tabs" label="Tabs link">
+      content a
+    </x-tab>
+    <x-tab to="/component/slider" label="Tabs link B">
+      content b
+    </x-tab>
+  </x-tab-group>
+</template>

package/docs/pages/component/tag/index.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XTag } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Tag'
+const description = 'Tags are used to display a label.'
+const components = [XTag]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'tabs'
+const next = 'tooltip'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/tag"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

package/docs/pages/component/tag/usage.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="space-x-2">
+    <x-tag color="primary">Hello</x-tag>
+    <x-tag color="amber">Amber</x-tag>
+    <x-tag outlined>I'm a tag</x-tag>
+    <x-tag rounded outlined color="pink">I'm a tag</x-tag>
+    <x-tag color="pink">I'm a tag</x-tag>
+    <x-tag removable @remove="notifications.log('remove me')">I'm a tag</x-tag>
+    <x-tag removable size="xs" @remove="notifications.log('remove me')">I'm a tag</x-tag>
+    <x-tag removable size="lg" @remove="notifications.log('remove me')">I'm a tag</x-tag>
+    <x-tag removable size="xl" @remove="notifications.log('remove me')">I'm a tag</x-tag>
+  </div>
+</template>
+
+<script>
+import { useNotifications } from '@indielayer/ui'
+
+export default {
+  setup() {
+    const notifications = useNotifications('notifica')
+
+    return {
+      notifications,
+    }
+  },
+}
+</script>

package/docs/pages/component/textarea/index.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { XTextarea } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+import VariantsDemoCode from './variants.vue?raw'
+import VariantsDemo from './variants.vue'
+import StatesDemoCode from './states.vue?raw'
+import StatesDemo from './states.vue'
+
+const title = 'Textarea'
+const description = 'Textareas allow the user to enter text.'
+const components = [XTextarea]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}, {
+  name: 'Variants',
+  description: '',
+  code: VariantsDemoCode,
+  component: VariantsDemo,
+}, {
+  name: 'States',
+  description: '',
+  code: StatesDemoCode,
+  component: StatesDemo,
+}]
+const back = 'slider'
+const next = 'toggle'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/textarea"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

package/docs/pages/component/textarea/states.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="grid grid-cols-4 gap-4">
+    <x-textarea v-model="name" disabled label="Disabled"/>
+    <x-textarea v-model="name" readonly label="Read only"/>
+    <x-textarea v-model="name" label="Error" error="Invalid input" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() { return { name: 'disabled' } },
+}
+</script>

package/docs/pages/component/textarea/usage.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const multiline = ref('')
+</script>
+
+<template>
+  <div class="grid grid-cols-2 gap-4">
+    <x-textarea
+      v-model="multiline"
+      label="Normal textarea"
+      helper="Helper text"
+      resizable
+      placeholder="Placeholder"
+      tooltip="Tooltip here"
+    />
+    <x-textarea v-model="multiline" label="Multiline adjust" adjust-to-text />
+  </div>
+</template>

package/docs/pages/component/textarea/variants.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="grid grid-cols-3 gap-4">
+    <x-textarea v-model="sizes" label="xs" size="xs" />
+    <x-textarea v-model="sizes" label="xs" size="sm" />
+    <x-textarea v-model="sizes" label="md" />
+    <x-textarea v-model="sizes" label="lg" size="lg" />
+    <x-textarea v-model="sizes" label="xl" size="xl" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() { return { sizes: 'Text size' } },
+}
+</script>

package/docs/pages/component/toggle/index.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { XToggle } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+import VariantsDemoCode from './variants.vue?raw'
+import VariantsDemo from './variants.vue'
+import StatesDemoCode from './states.vue?raw'
+import StatesDemo from './states.vue'
+
+const title = 'Toggle'
+const description = 'Toggles are used to switch between two states.'
+const components = [XToggle]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}, {
+  name: 'Variants',
+  description: '',
+  code: VariantsDemoCode,
+  component: VariantsDemo,
+}, {
+  name: 'States',
+  description: '',
+  code: StatesDemoCode,
+  component: StatesDemo,
+}]
+const back = 'textarea'
+const next = 'accordion'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/toggle"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

package/docs/pages/component/toggle/states.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="grid grid-cols-4 gap-4">
+    <x-toggle disabled label="Disabled" />
+    <x-toggle v-model="checked" loading label="Loading" color="blue"/>
+    <x-toggle error="Invalid input" label="Error"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data() { return { checked: true } },
+}
+</script>

package/docs/pages/component/toggle/usage.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const checked = ref(true)
+</script>
+
+<template>
+  <div class="grid grid-cols-2 gap-4">
+    <x-toggle v-model="checked" label="Primary" />
+    <x-toggle v-model="checked" color="sky" label="Sky" />
+  </div>
+</template>

package/docs/pages/component/toggle/variants.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="flex items-center space-x-4">
+    <x-toggle v-model="checked" size="xs" label="xs"/>
+    <x-toggle v-model="checked" size="sm" label="sm"/>
+    <x-toggle v-model="checked" label="md"/>
+    <x-toggle v-model="checked" size="lg" label="lg"/>
+    <x-toggle v-model="checked" size="xl" label="xl"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data() { return { checked: false } },
+}
+</script>

package/docs/pages/component/tooltip/index.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XTooltip, XToggleTip } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Tooltip'
+const description = 'Tooltips are used to display a message when hovering over an element.'
+const components = [XTooltip, XToggleTip]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'tag'
+const next = ''
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/tooltip"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

package/docs/pages/component/tooltip/usage.vue

@@ -0,0 +1,12 @@
+<template>
+  <x-tooltip>
+    <x-button>Hover me to see the tooltip</x-button>
+    <template #tooltip>
+      <div class="font-bold">Tooltip title</div>
+      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus corrupti maiores aut minima iusto nulla inventore ea illo commodi et.</div>
+    </template>
+  </x-tooltip>
+
+  <!-- tooltip with the info icon -->
+  <x-toggle-tip content="Lets go"/>
+</template>

package/docs/pages/error.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="text-center px-8 py-20">
+    <img class="mb-5 mx-auto max-w-80 max-h-80" src="../assets/images/error.svg" />
+    <h2 class="text-h3">Page not found</h2>
+  </div>
+</template>

package/docs/pages/icons.vue

@@ -0,0 +1,101 @@
+<template>
+  <h2 class="text-4xl font-semibold">Icons</h2>
+  <h1 class="text-lg my-2 text-gray-500 dark:text-gray-400">Building your own SVG icon library from multiple open source libraries</h1>
+  <x-divider class="mt-4 mb-8"/>
+
+  <p class="text-xl mt-8 my-4">SVG Icon Libraries</p>
+  <div class="font-bold text-lg">
+    <ul>
+      <li><x-link
+        external
+        color="sky"
+        underline
+        href="https://icones.js.org/"
+        target="_blank"
+      >Icônes - All the libraries</x-link></li>
+      <li><x-link
+        external
+        color="sky"
+        underline
+        href="https://heroicons.com/"
+        target="_blank"
+      >Hero Icons (MIT)</x-link></li>
+      <li><x-link
+        external
+        color="sky"
+        underline
+        href="https://tabler-icons.io/"
+        target="_blank"
+      >Tabler Icons (MIT)</x-link></li>
+      <li><x-link
+        external
+        color="sky"
+        underline
+        href="https://feathericons.com/"
+        target="_blank"
+      >Feather Icons (MIT)</x-link></li>
+    </ul>
+  </div>
+
+  <h3 class="text-2xl mt-8 mb-4">1. Create the icons file -> <strong>icons.js</strong></h3>
+  <code-snippet
+    lang="js"
+    :code="iconExample"
+  />
+
+  <h3 class="text-2xl mt-8 mb-4">2. Add icons on UI install options -> <strong>main.js</strong></h3>
+  <code-snippet
+    lang="js"
+    :code="installExample"
+  />
+
+  <h3 class="text-2xl mt-8 mb-4">3. Add icons from open source libraries</h3>
+  <p class="mb-2 text-xl">Start adding the icons you need.</p>
+  <p class="mb-2">SVG wrapper optional, copy only the content part of the SVG:</p>
+  <p class="mb-4 border dark:border-gray-600 rounded-md p-4">&#x3C;svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; width=&#x22;24&#x22; height=&#x22;24&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22; stroke=&#x22;currentColor&#x22; stroke-width=&#x22;2&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; class=&#x22;feather feather-check&#x22;&#x3E;<strong>&#x3C;polyline points=&#x22;20 6 9 17 4 12&#x22;&#x3E;&#x3C;/polyline&#x3E;</strong>&#x3C;/svg&#x3E;</p>
+  <code-snippet lang="js" :code="iconExample1"/>
+
+  <div class="my-4">
+    Icon "check" <x-icon icon="check"/>
+  </div>
+  <code-snippet lang="js" :code="iconExample2"/>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      iconExample: `// icons.js
+export default {
+  check: '<polyline points="20 6 9 17 4 12"></polyline>'
+}`,
+      installExample: `// main.js
+import { createApp } from 'vue'
+import UI from '@indielayer/ui'
+import icons from './icons'
+
+const app = createApp(App)
+
+app.use(UI, {
+  icons,
+})`,
+      iconExample1: `// icons.js
+export default {
+  check: '<polyline points="20 6 9 17 4 12"></polyline>',
+  // or
+  check2: {
+    icon: '<polyline points="20 6 9 17 4 12"></polyline>',
+    viewBox: '0 0 24 24', // default
+    filled: false, // default
+  },
+  // or
+  check3: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>'
+}`,
+      iconExample2: `<template>
+  <x-icon icon="check" />
+</template>
+`,
+    }
+  },
+}
+</script>