silva
/
adrema
2
1
Fork 0
Code Issues 23 Pull Requests 1 Projects 1 Releases 104 Wiki Activity

Cleanup

This commit is contained in:
philipp lang 2024-06-28 10:23:42 +02:00
parent 12eb5016c8
commit b6c9eea8ea
5 changed files with 61 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
package-lock.json generated
View File

@ -10,6 +10,7 @@
"@editorjs/nested-list": "^1.4.2",
"@editorjs/paragraph": "^2.11.3",
"@inertiajs/vue3": "^1.0.14",
"@tailwindcss/forms": "^0.5.7",
"@tailwindcss/typography": "^0.5.10",
"@vitejs/plugin-vue": "^4.6.2",
"change-case": "^4.1.2",
@ -975,6 +976,17 @@
"node": ">= 10"
}
},
"node_modules/@tailwindcss/forms": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz",
"integrity": "sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==",
"dependencies": {
"mini-svg-data-uri": "^1.2.3"
},
"peerDependencies": {
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
}
},
"node_modules/@tailwindcss/typography": {
"version": "0.5.10",
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz",
@ -2941,6 +2953,14 @@
"node": ">= 0.6"
}
},
"node_modules/mini-svg-data-uri": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
"integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
"bin": {
"mini-svg-data-uri": "cli.js"
}
},
"node_modules/minimatch": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",

1
package.json
View File

@ -29,6 +29,7 @@
"@editorjs/nested-list": "^1.4.2",
"@editorjs/paragraph": "^2.11.3",
"@inertiajs/vue3": "^1.0.14",
"@tailwindcss/forms": "^0.5.7",
"@tailwindcss/typography": "^0.5.10",
"@vitejs/plugin-vue": "^4.6.2",
"change-case": "^4.1.2",

27
resources/js/components/form/Select.vue
View File

@ -1,25 +1,24 @@
<template>
<label class="field-wrap" :for="id" :class="`field-wrap-${size}`">
<span v-if="label" class="field-label">
<label class="flex flex-col group" :for="id" :class="sizes[size]">
<span v-if="label" class="font-semibold leading-none text-gray-400 group-[.field-base]:text-sm group-[.field-sm]:text-xs">
{{ label }}
<span v-show="required" class="text-red-800">&nbsp;*</span>
</span>
<div class="real-field-wrap" :class="`size-${size}`">
<select v-model="inner" :disabled="disabled" :name="name">
<div class="relative flex-none flex">
<select
v-model="inner"
:disabled="disabled"
:name="name"
class="group-[.field-base]:h-[35px] group-[.field-sm]:h-[23px] group-[.field-base]:border-2 group-[.field-sm]:border border-gray-600 border-solid text-gray-300 bg-gray-700 leading-none rounded-lg group-[.field-base]:text-sm group-[.field-sm]:text-xs py-0 pr-8 group-[.field-base]:pl-2 group-[.field-sm]:pl-1 w-full"
>
<option v-if="placeholder" :value="def">{{ placeholder }}</option>
<option v-for="option in parsedOptions" :key="option.id" :value="option.id">{{ option.name }}</option>
</select>
<div class="info-wrap">
<div class="h-full items-center flex absolute top-0 right-0">
<div v-if="hint" v-tooltip="hint">
<ui-sprite src="info-button" class="info-button"></ui-sprite>
</div>
<div v-if="size != 'xs'" class="px-1 relative">
<ui-sprite class="chevron w-3 h-3 fill-current" src="chevron"></ui-sprite>
</div>
<div v-if="size == 'xs'" class="px-1 relative">
<ui-sprite class="chevron w-2 h-2 fill-current" src="chevron"></ui-sprite>
</div>
</div>
</div>
</label>
@ -29,6 +28,12 @@
import {computed, ref} from 'vue';
import map from 'lodash/map';
const sizes = ref({
sm: 'field-sm',
base: 'field-base',
lg: 'field-lg',
});
const emit = defineEmits(['update:modelValue']);
const props = defineProps({

48
resources/js/components/form/Text.vue
View File

@ -1,16 +1,28 @@
<template>
<label class="field-wrap field-wrap-sm" :for="id" :class="sizes[size].wrap">
<span v-if="label" class="field-label">
<label class="flex flex-col group" :for="id" :class="sizes[size]">
<span v-if="label" class="font-semibold leading-none text-gray-400 group-[.field-base]:text-sm group-[.field-sm]:text-xs">
{{ label }}
<span v-show="required" class="text-red-800">&nbsp;*</span>
</span>
<div class="real-field-wrap size-sm" :class="sizes[size].field">
<input :name="name" :type="type" :value="transformedValue" :disabled="disabled" :placeholder="placeholder"
:min="min" :max="max" @keypress="$emit('keypress', $event)" @input="onInput" @change="onChange"
@focus="onFocus" @blur="onBlur" />
<div v-if="hint" class="info-wrap">
<div class="relative flex-none flex">
<input
:name="name"
:type="type"
:value="transformedValue"
:disabled="disabled"
placeholder=""
:min="min"
:max="max"
class="group-[.field-base]:h-[35px] group-[.field-sm]:h-[23px] group-[.field-base]:border-2 group-[.field-sm]:border border-gray-600 border-solid text-gray-300 bg-gray-700 leading-none rounded-lg group-[.field-base]:text-sm group-[.field-sm]:text-xs py-0 group-[.field-base]:px-2 group-[.field-sm]:px-1 w-full"
@keypress="$emit('keypress', $event)"
@input="onInput"
@change="onChange"
@focus="onFocus"
@blur="onBlur"
/>
<div v-if="hint" class="h-full items-center flex absolute top-0 right-0">
<div v-tooltip="hint">
<ui-sprite src="info-button" class="info-button"></ui-sprite>
<ui-sprite src="info-button" class="text-primary-700"></ui-sprite>
</div>
</div>
</div>
@ -79,11 +91,6 @@ var transformers = {
export default {
props: {
placeholder: {
default: function () {
return '';
},
},
default: {},
mode: {
default: function () {
@ -139,18 +146,9 @@ export default {
return {
focus: false,
sizes: {
sm: {
wrap: 'field-wrap-sm',
field: 'size-sm',
},
base: {
wrap: 'field-wrap-base',
field: 'size-base',
},
lg: {
wrap: 'field-wrap-lg',
field: 'size-lg',
},
sm: 'field-sm',
base: 'field-base',
lg: 'field-lg',
},
};
},

2
tailwind.config.js vendored
View File

@ -33,5 +33,5 @@ module.exports = {
},
},
plugins: [require('@tailwindcss/typography')],
plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
};