frappe-ui 0.0.1

package/license.md

@@ -0,0 +1,8 @@
+The MIT License (MIT)
+Copyright © 2022 Frappe Technologies Pvt. Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "frappe-ui",
+  "version": "0.0.1",
+  "description": "A set of components and utilities for rapid UI development",
+  "main": "./src/index.js",
+  "scripts": {
+    "prettier": "npx prettier -w ./src"
+  },
+  "files": [
+    "src"
+  ],
+  "author": "Frappe Technologies Pvt. Ltd.",
+  "license": "MIT",
+  "dependencies": {
+    "@popperjs/core": "^2.11.2",
+    "@tailwindcss/forms": "^0.4.0",
+    "@tailwindcss/typography": "^0.5.0",
+    "autoprefixer": "^10.4.2",
+    "feather-icons": "^4.28.0",
+    "lodash": "^4.17.21",
+    "postcss": "^8.4.5",
+    "socket.io-client": "^2.4.0",
+    "tailwindcss": "^3.0.12"
+  }
+}

package/readme.md

@@ -0,0 +1,313 @@
+# Frappe UI
+
+A set of components and utilities for rapid UI development.
+
+Frappe UI components are built using Vue 3 and Tailwind. Along with components,
+it also ships with directives and utilities that make UI development easier.
+
+## Installation
+```sh
+npm install frappe-ui
+# or
+yarn add frappe-ui
+```
+
+Now, import the FrappeUI plugin and components in your Vue app's `main.js`:
+
+```js
+import { createApp } from "vue";
+import { FrappeUI, Button } from "frappe-ui";
+import App from "./App.vue";
+import "./index.css";
+
+let app = createApp(App);
+app.use(FrappeUI);
+app.component("Button", Button);
+app.mount("#app");
+```
+
+In your `tailwind.config.js` file, include the frappe-ui preset:
+
+```js
+module.exports = {
+  presets: [
+    require('frappe-ui/src/utils/tailwind.config')
+  ],
+  ...
+}
+```
+
+## Components
+
+Frappe UI ships with a bunch of components. To use a component, you can import it directly from `frappe-ui`:
+```html
+<template>
+    <Button>Click me</Button>
+</template>
+<script>
+import { Button } from 'frappe-ui';
+export default {
+    components: {
+        Button
+    }
+}
+</script>
+```
+
+You can also register components on the root `app` so that you don't have to import them in every component.
+
+`main.js`
+```js
+import { createApp } from "vue";
+import { Button, Input } from "frappe-ui";
+
+let app = createApp(App);
+app.component("Button", Button);
+app.component("Input", Input);
+app.mount("#app");
+```
+
+### Alert
+```html
+<Alert title="Info">Your account has been created.</Alert>
+```
+
+### Avatar
+```html
+<Avatar label="John Doe" />
+<Avatar label="John Doe" imageURL="https://picsum.photos/200" />
+```
+
+### Badge
+```html
+<Badge>Open</Badge>
+<Badge color="green">Completed</Badge>
+<Badge color="red">Error</Badge>
+<Badge color="yellow">Closed</Badge>
+<Badge color="blue">Running</Badge>
+```
+
+### Button
+```html
+<Button>Default</Button>
+<Button type="primary">Primary</Button>
+<Button type="danger">Danger</Button>
+<Button type="white">White</Button>
+<Button icon="x" />
+<Button icon-left="menu">Menu</Button>
+<Button icon-right="external-link">Link</Button>
+<Button :loading="true">Loading</Button>
+```
+
+### Card
+```html
+<Card title="Heading" subtitle="Sub text">
+    <div class="text-base">Card content</div>
+</Card>
+```
+
+### Dialog
+The Dialog component uses `teleport` feature and requires `#modals` to exist.
+Make sure you add a `<div id="modals"></div>` before the end of your body tag.
+
+```html
+<Button @click="dialogOpen = true">Open Dialog</Button>
+<Dialog title="This is Dialog" v-model="dialogOpen">
+    <div class="text-base">Dialog content</div>
+</Dialog>
+```
+
+### Dropdown
+The Dropdown component uses `teleport` feature and requires `#popovers` to exist.
+Make sure you add a `<div id="popovers"></div>` before the end of your body tag.
+
+```html
+<Dropdown :items="[{ label: 'Option 1' }, { label: 'Option 2' }]">
+    <template v-slot="{ toggleDropdown }">
+        <Button @click="toggleDropdown()">Open Dropdown</Button>
+    </template>
+</Dropdown>
+```
+
+### ErrorMessage
+```html
+<ErrorMessage message="There was an error" />
+```
+
+### FeatherIcon
+Uses [`feather-icons`](https://github.com/feathericons/feather) under the hood.
+
+```html
+<FeatherIcon class="w-4 h-4" name="menu" />
+<FeatherIcon class="w-4 h-4" name="circle" />
+<FeatherIcon class="w-4 h-4" name="arrow-left" />
+<FeatherIcon class="w-4 h-4" name="arrow-right" />
+```
+
+### GreenCheckIcon
+```html
+<GreenCheckIcon class="w-4 h-4" />
+```
+
+### Input
+```html
+<Input label="Text" type="text" value="" placeholder="Text" />
+<Input label="Long Text" type="textarea" value="" placeholder="Textarea" />
+<Input
+    label="Select"
+    type="select"
+    value=""
+    :options="['Option 1', 'Option 2']"
+/>
+<Input label="Check" type="checkbox" value="" />
+```
+
+### ListItem
+```html
+<ListItem title="List Item 1" subtitle="Sub text 1">
+    <template #actions>
+        <Button icon="more-horizontal" />
+    </template>
+</ListItem>
+<ListItem title="List Item 2" subtitle="Sub text 2" />
+```
+
+### LoadingIndicator
+```html
+<LoadingIndicator />
+```
+
+### LoadingText
+```html
+<LoadingText />
+```
+
+### Spinner
+```html
+<Spinner class="w-5" />
+```
+
+### SuccessMessage
+```html
+<SuccessMessage message="Completed successfully" />
+```
+
+## Directives
+
+### onOutsideClick
+This directive is used when you want to execute a function when the user clicks outside of a target element. For e.g., when user clicks outside a dropdown, the dropdown should close.
+
+```html
+<button v-on-outside-click="handleOutsideClick">Click me</button>
+```
+
+## Utilities
+
+### call
+This function wraps `fetch` API. It is built for making web requests to a Frappe server.
+
+```js
+call('frappe.client.get_value', {
+    doctype: 'ToDo',
+    filters: {name: 'adsfasdf'},
+    fieldname: 'description'
+})
+```
+
+### resources
+This is a helper for managing async data fetching in Vue apps that work with a Frappe backend.
+
+```html
+<template>
+    <div>
+        <LoadingText v-if="$resources.todos.loading" />
+        <div
+            v-for="todo in $resources.todos.data || []"
+            :key="todo.name"
+        >
+            <div>{{ todo.description }}</div>
+            <Badge>{{ todo.status }}</Badge>
+        </div>
+        <ErrorMessage message="$resources.todos.error" />
+    </div>
+</template>
+<script>
+import { Badge, LoadingText, ErrorMessage } from 'frappe-ui';
+
+export default {
+    name: 'ToDos',
+    resources: {
+        todos: {
+            method: 'frappe.client.get_list',
+            params: {
+                doctype: 'ToDo',
+                fields: ['*']
+            }
+        }
+    },
+    components: {
+        Badge,
+        LoadingText,
+        ErrorMessage
+    }
+}
+</script>
+```
+
+### socketio
+
+This module pre-configures a socketio instance on the port 9000. If you install the FrappeUI plugin, `this.$socket` will be available in all Vue components.
+
+Usage:
+```js
+this.$socket.on('list_update', (data) => {
+    // handle list update event
+});
+```
+
+### tailwind.config
+This is a [tailwind preset](https://tailwindcss.com/docs/presets) that customizes the standard tailwind config to include Frappe design tokens.
+
+Usage:
+```js
+module.exports = {
+  presets: [
+    require('frappe-ui/src/utils/tailwind.config')
+  ],
+  ...
+}
+```
+
+## Vue Plugin
+Vue plugin that installs call, resources and socketio in your Vue app
+
+`main.js`
+```js
+import { createApp } from "vue";
+import { FrappeUI } from "frappe-ui";
+import App from "./App.vue";
+
+let app = createApp(App);
+app.use(FrappeUI);
+app.mount("#app");
+```
+
+You can now use these features in your Vue components.
+```html
+<script>
+export default {
+    resources: {
+        ping: 'frappe.handler.ping'
+    },
+    mounted() {
+        this.$call('ping');
+        this.$socket.on('list_update', (data) => {
+            // handle list update event
+        });
+    }
+}
+</script>
+```
+
+## License
+MIT

package/src/components/Alert.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="block w-full">
+    <div
+      class="items-start px-4 md:px-5 py-3.5 text-base rounded-md flex"
+      :class="classes"
+    >
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          opacity="0.8"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2ZM12 10.5C12.5523 10.5 13 10.9477 13 11.5V17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V11.5C11 10.9477 11.4477 10.5 12 10.5ZM13 7.99976C13 7.44747 12.5523 6.99976 12 6.99976C11.4477 6.99976 11 7.44747 11 7.99976V8.1C11 8.65228 11.4477 9.1 12 9.1C12.5523 9.1 13 8.65228 13 8.1V7.99976Z"
+          fill="#318AD8"
+        />
+      </svg>
+      <div class="w-full ml-2">
+        <div class="flex flex-col md:items-baseline md:flex-row">
+          <h3 class="text-lg font-medium text-gray-900" v-if="title">
+            {{ title }}
+          </h3>
+          <div class="mt-1 md:mt-0 md:ml-2">
+            <slot></slot>
+          </div>
+          <div class="mt-3 md:mt-0 md:ml-auto">
+            <slot name="actions"></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Alert',
+  props: {
+    title: String,
+    type: {
+      type: String,
+      default: 'warning',
+    },
+  },
+  computed: {
+    classes() {
+      return {
+        warning: 'text-gray-700 bg-blue-50',
+      }[this.type]
+    },
+  },
+}
+</script>

package/src/components/Avatar.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="overflow-hidden" :class="styleClasses">
+    <img
+      v-if="imageURL"
+      :src="imageURL"
+      class="object-cover"
+      :class="styleClasses"
+    />
+    <div
+      v-else
+      class="flex items-center justify-center w-full h-full text-green-800 uppercase bg-green-200"
+      :class="{ sm: 'text-xs', md: 'text-base', lg: 'text-lg' }[size]"
+    >
+      {{ label && label[0] }}
+    </div>
+  </div>
+</template>
+
+<script>
+const validShapes = ['square', 'circle']
+
+export default {
+  name: 'Avatar',
+  props: {
+    imageURL: String,
+    label: String,
+    size: {
+      default: 'md',
+    },
+    shape: {
+      default: 'circle',
+      validator(value) {
+        const valid = validShapes.includes(value)
+        if (!valid) {
+          console.warn(
+            `shape property for <Avatar /> must be one of `,
+            validShapes
+          )
+        }
+        return valid
+      },
+    },
+  },
+  computed: {
+    styleClasses() {
+      const sizeClasses = {
+        sm: 'w-4 h-4',
+        md: 'w-8 h-8',
+        lg: 'w-12 h-12',
+      }[this.size]
+
+      const shapeClass = {
+        circle: 'rounded-full',
+        square: 'rounded-lg',
+      }[this.shape]
+
+      return `${shapeClass} ${sizeClasses}`
+    },
+  },
+}
+</script>

package/src/components/Badge.vue

@@ -0,0 +1,40 @@
+<template>
+  <span
+    class="inline-block px-3 py-1 text-xs font-medium rounded-md cursor-default"
+    :class="classes"
+  >
+    <slot>{{ status }}</slot>
+  </span>
+</template>
+<script>
+export default {
+  name: 'Badge',
+  props: ['color', 'status'],
+  computed: {
+    classes() {
+      let color = this.color
+      if (!color && this.status) {
+        color = {
+          Pending: 'yellow',
+          Running: 'yellow',
+          Success: 'green',
+          Failure: 'red',
+          Active: 'green',
+          Broken: 'red',
+          Updating: 'blue',
+          Rejected: 'red',
+          Published: 'green',
+          Approved: 'green',
+        }[this.status]
+      }
+      return {
+        gray: 'text-gray-700 bg-gray-50',
+        green: 'text-green-700 bg-green-50',
+        red: 'text-red-700 bg-red-50',
+        yellow: 'text-yellow-700 bg-yellow-50',
+        blue: 'text-blue-700 bg-blue-50',
+      }[color || 'gray']
+    },
+  },
+}
+</script>

package/src/components/Button.vue

@@ -0,0 +1,103 @@
+<template>
+  <button
+    v-bind="$attrs"
+    :class="buttonClasses"
+    @click="handleClick"
+    :disabled="isDisabled"
+  >
+    <LoadingIndicator
+      v-if="loading"
+      :class="{
+        'text-white': type == 'primary',
+        'text-gray-600': type == 'secondary',
+        'text-red-200': type == 'danger',
+      }"
+    />
+    <FeatherIcon v-else-if="iconLeft" :name="iconLeft" class="w-4 h-4 mr-1.5" />
+    <template v-if="loading && loadingText">{{ loadingText }}</template>
+    <template v-else-if="icon">
+      <FeatherIcon :name="icon" class="w-4 h-4" />
+    </template>
+    <span :class="icon ? 'sr-only' : ''">
+      <slot></slot>
+    </span>
+    <FeatherIcon v-if="iconRight" :name="iconRight" class="w-4 h-4 ml-2" />
+  </button>
+</template>
+<script>
+import FeatherIcon from './FeatherIcon.vue'
+import LoadingIndicator from './LoadingIndicator.vue'
+
+export default {
+  name: 'Button',
+  components: {
+    FeatherIcon,
+    LoadingIndicator,
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'secondary',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    iconLeft: {
+      type: String,
+      default: null,
+    },
+    iconRight: {
+      type: String,
+      default: null,
+    },
+    icon: {
+      type: String,
+      default: null,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    loadingText: {
+      type: String,
+      default: null,
+    },
+    route: {},
+    link: {
+      type: String,
+      default: null,
+    },
+  },
+  computed: {
+    buttonClasses() {
+      return [
+        'inline-flex items-center justify-center text-base leading-5 rounded-md focus:outline-none',
+        this.icon ? 'p-1.5' : 'px-3 py-1',
+        {
+          'opacity-50 cursor-not-allowed pointer-events-none': this.isDisabled,
+          'bg-gradient-blue hover:bg-gradient-none hover:bg-blue-500 text-white focus:shadow-outline-blue':
+            this.type === 'primary',
+          'bg-gray-100 hover:bg-gray-200 text-gray-900 focus:shadow-outline-gray':
+            this.type === 'secondary',
+          'bg-red-500 hover:bg-red-400 text-white focus:shadow-outline-red':
+            this.type === 'danger',
+          'bg-white text-gray-900 shadow focus:ring focus:ring-gray-400':
+            this.type === 'white',
+        },
+      ]
+    },
+    isDisabled() {
+      return this.disabled || this.loading
+    },
+  },
+  methods: {
+    handleClick() {
+      if (this.route && this.$router) {
+        this.route && this.$router.push(this.route)
+      }
+      this.link ? window.open(this.link, '_blank') : null
+    },
+  },
+}
+</script>

package/src/components/Card.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="flex flex-col px-6 py-5 bg-white border rounded-lg shadow">
+    <div class="flex items-baseline justify-between">
+      <div class="flex items-baseline space-x-2">
+        <div class="flex items-center space-x-2" v-if="$slots['actions-left']">
+          <slot name="actions-left"></slot>
+        </div>
+        <h2 class="text-xl font-semibold">{{ title }}</h2>
+      </div>
+      <div class="flex items-center space-x-2" v-if="$slots['actions']">
+        <slot name="actions"></slot>
+      </div>
+    </div>
+    <p class="text-base text-gray-600 mt-1.5" v-if="subtitle">
+      {{ subtitle }}
+    </p>
+    <div
+      v-if="loading"
+      class="flex flex-col items-center justify-center flex-auto mt-4 rounded-md"
+    >
+      <LoadingText />
+    </div>
+    <div class="flex-auto mt-4 overflow-auto" v-else-if="$slots['default']">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+import LoadingText from './LoadingText.vue'
+export default {
+  name: 'Card',
+  props: ['title', 'subtitle', 'loading'],
+  components: {
+    LoadingText,
+  },
+}
+</script>