@citruslime/ui 1.2.1-beta.0 → 1.2.1

package/src/components/login/login.vue

@@ -1,101 +0,0 @@
-<script lang="ts" src="./login"></script>
-
-<style scoped src="./login.css"></style>
-
-<template>
-    <div class="bg-cover bg-left-bottom h-screen"
-         :style="{ 'background-image': `url('${backgroundImage}')` }">
-        <form class="bg-secondary-default flex flex-wrap opacity-95 p-10 pb-12 w-full">
-            <div class="md:flex-1 md:pb-0 pb-8 w-full">
-                <img :src="logo">
-            </div>
-
-            <div class="content-center flex items-center md:pb-0 md:pr-2 md:w-auto pb-2 w-auto">
-                <cl-ui-language-switcher v-model:current-locale="selectedLocale"
-                                         :supported-locales="supportedLocales" />
-            </div>
-
-            <div class="md:pb-0 md:pr-2 md:w-1/4 pb-2 w-full">
-                <div class="inline relative text-grey-4 w-full">
-                    <ph-user class="absolute left-3 top-0.5"
-                             :size="18" />
-
-                    <input v-model.trim="username"
-                           class="!pb-1 !pl-9 w-full"
-                           type="email"
-                           :data-valid="usernameValid"
-                           :placeholder="localisations.email"
-                           autocomplete="username"
-                           @input="clearErrors">
-                </div>
-
-                <div v-show="username !== ''"
-                     class="text-grey-3 text-sm">
-                    <div v-show="usernameValid"
-                         class="flex mt-2">
-                        <ph-check class="text-primary-default"
-                                  :size="16" />
-
-                        <em class="align-middle inline-block ml-4">
-                            {{ localisations.validEmail }}
-                        </em>
-                    </div>
-
-                    <div v-show="!usernameValid"
-                         class="flex mt-2">
-                        <ph-x class="text-danger-default"
-                              :size="16" />
-
-                        <em class="align-middle inline-block ml-4">
-                            {{ localisations.invalidEmail }}
-                        </em>
-                    </div>
-                </div>
-            </div>
-
-            <div class="md:pb-0 md:pr-2 md:w-1/4 pb-2 w-full">
-                <div class="inline relative text-grey-4 w-full">
-                    <ph-lock class="absolute left-3 top-0.5"
-                             :size="18" />
-
-                    <ph-eye v-show="passwordFieldType === 'password'"
-                            class="absolute cursor-pointer right-3 top-0.5"
-                            :size="18"
-                            @click="passwordFieldType = 'text'" />
-
-                    <ph-eye-slash v-show="passwordFieldType === 'text'"
-                                  class="absolute cursor-pointer right-3 top-0.5"
-                                  :size="18"
-                                  @click="passwordFieldType = 'password'" />
-
-                    <input v-model="password"
-                           class="!pb-1 !pl-9 !pr-9 w-full"
-                           :type="passwordFieldType"
-                           :data-valid="password !== ''"
-                           :placeholder="localisations.password"
-                           autocomplete="current-password"
-                           @input="clearErrors">
-                </div>
-            </div>
-
-            <div class="md:w-1/4 w-full">
-                <cl-ui-button class="w-full"
-                              colour="blue"
-                              :loading="loading"
-                              :disabled="!usernameValid || password === ''"
-                              @click.prevent="login">
-                    {{ localisations.login }}
-                </cl-ui-button>
-            </div>
-
-            <span v-show="errors.length"
-                  class="emphasis-danger mt-4 p-4 text-sm w-full">
-                <div v-for="(error, index) in errors"
-                     :key="index"
-                     class="font-semibold">
-                    {{ error }}
-                </div>
-            </span>
-        </form>
-    </div>
-</template>

package/src/components/modal/modal.vue

@@ -1,48 +0,0 @@
-<script lang="ts" src="./modal"></script>
-
-<template>
-    <slot name="trigger"
-          v-bind="{ toggleModal }"></slot>
-
-    <teleport to="body">
-        <div v-show="visible"
-             class="align-items-center bg-black bg-opacity-40 bottom-0 fixed flex h-full justify-center left-0 right-0 top-0 w-full z-40">
-            <div v-bind="$attrs"
-                 class="bg-white flex flex-wrap mx-0 my-auto overflow-y-auto relative rounded shadow-lg"
-                 :class="{ 'lg:w-2/12 w-10/12': size === 'x-small', 'w-6/12': size === 'small', 'w-8/12': size === 'medium', 'w-10/12': size === 'large' }">
-                <div class="absolute cursor-pointer h-2 leading-5 right-3 text-black text-center top-3 w-5"
-                     @click="modalAction(false)">
-                    <ph-x :size="20" />
-                </div>
-
-                <div class="border-b border-grey-2 font-semibold h-11 leading-10 overflow-ellipsis overflow-hidden pl-2 pr-8 text-2xl w-full whitespace-nowrap">
-                    {{ title }}
-                </div>
-
-                <div class="overflow-y-auto p-2 w-full"
-                     v-bind="{ toggleModal }">
-                    <slot></slot>
-                </div>
-
-                <div v-show="showCancelButton || showConfirmButton"
-                     class="p-2 text-right text-sm w-full">
-                    <cl-ui-button v-if="showConfirmButton"
-                                  class="mr-2"
-                                  colour="primary"
-                                  size="small"
-                                  :disabled="confirmEnabled === false"
-                                  @click.prevent="modalAction(true)">
-                        {{ confirmButtonText }}
-                    </cl-ui-button>
-
-                    <cl-ui-button v-if="showCancelButton"
-                                  colour="danger"
-                                  size="small"
-                                  @click.prevent="modalAction(false)">
-                        {{ cancelButtonText }}
-                    </cl-ui-button>
-                </div>
-            </div>
-        </div>
-    </teleport>
-</template>

package/src/components/notification/notification.vue

@@ -1,36 +0,0 @@
-<script lang="ts" src="./notification"></script>
-
-<template>
-    <teleport :to="container">
-        <div class="fixed w-80 z-40"
-             :class="{
-                 'top-5 left-5': position === 'top-left',
-                 'top-5 left-1/2': position === 'top-centre',
-                 'top-5 right-5': position === 'top-right',
-                 'bottom-5 left-5': position === 'bottom-left',
-                 'bottom-5 left-1/2': position === 'bottom-centre',
-                 'bottom-5 right-5': position === 'bottom-right'
-             }">
-            <div v-for="(notification, index) in notifications"
-                 v-bind="$attrs"
-                 :key="index"
-                 class="break-words cursor-pointer flex font-semibold group mb-2 overflow-hidden p-4 rounded shadow-lg text-sm"
-                 :class="{
-                     'bg-white': notification.colour === 'default',
-                     'bg-primary-default': notification.colour === 'primary',
-                     'bg-secondary-default': notification.colour === 'secondary',
-                     'bg-danger-default': notification.colour === 'danger',
-                     'bg-warning-default': notification.colour === 'warning'
-                 }"
-                 @click="removeNotification(notification)">
-                <span class="flex-1 overflow-ellipsis select-none w-64">
-                    {{ notification.message }}
-                </span>
-
-                <ph-x class="group-hover:opacity-100 inline-block opacity-0"
-                      :size="16"
-                      weight="bold" />
-            </div>
-        </div>
-    </teleport>
-</template>

package/src/components/slider/slider.vue

@@ -1,41 +0,0 @@
-<script lang="ts" src="./slider"/>
-
-<style scoped src="./slider.css"></style>
-
-<template>
-    <div v-if="validProps"
-         v-bind="$attrs"
-         class="flex flex-wrap items-center">
-        <input class="!text-sm md:!h-8 md:!w-auto"
-               type="number"
-               :value="currentValue"
-               :min="min"
-               :max="max"
-               :step="step"
-               :disabled="disabled"
-               @input="debounce(updateCurrentValue, [ $event.target, $forceUpdate ])">
-
-        <div class="flex flex-1 flex-wrap items-center md:mt-0 mt-3">
-            <span class="bg-grey-0 leading-6 md:ml-2 ml-0 px-3 rounded-full text-center text-xs">
-                {{ n(min, Number.isInteger(min) ? NumberFormat.INTEGER : NumberFormat.DECIMAL, currentLocale ) }}
-            </span>
-
-            <input v-model.number="currentValue"
-                   class="align-middle appearance-none bg-gradient-to-r border border-grey-2 delay-500 ease-in flex-1 h-5 ml-2 outline-none rounded-full transition-colors"
-                   :style="{ background: `linear-gradient(to right, ${colour} 0%, ${colour} ${percentage}%, white ${percentage}%, white 100%)` }"
-                   type="range"
-                   :min="min"
-                   :max="max"
-                   :step="step"
-                   :disabled="disabled">
-
-            <span class="bg-grey-0 leading-6 ml-2 px-3 rounded-full text-center text-xs">
-                {{ n(max, Number.isInteger(max) ? NumberFormat.INTEGER : NumberFormat.DECIMAL, currentLocale ) }}
-            </span>
-        </div>
-    </div>
-    <div v-else
-         class="emphasis-danger text-sm w-full">
-        {{ localisations.invalidProps }}
-    </div>
-</template>